css 如何重新着色引导卡边框颜色？

yb3bgrhw 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(164)

所以，我使用引导卡来使我的网页看起来整洁和东西。引导卡的默认颜色是白色。与导航栏你可以只设置颜色选项在顶部作为导航栏黑暗或什么，但在这里你不能这样做，所以我不得不手动设置颜色卡。一切顺利，但是有一个小问题让我很恼火，那就是边界，分隔标题和标题的边界，边界只能显示为黑色，因为我把卡片重新着色为黑色，所以你看不见它。
我的问题截图：https://ibb.co/8MqtRJP
附言：如果你看不到引导卡的边框，请再看一遍，因为一开始很难看到
我的代码：

<div class="card" style="width: 800px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
    <h5 class="card-header" style="color: white" >Time Managing</h5>
    <div class="card-body" style="color: white" >
      <h5 class="card-title">Prioritization</h5>
      <p class="card-text">Additional content.</p>
      <a href="#" class="btn btn-primary">Learn More</a>
    </div>
  </div>

我试着使用class ="card"并赋予它一种

.card {
  border: color: white;
}

我期待着边界，你知道，变成白色，因为大多数边界使用的边界标签，但这并没有工作。
有人有什么想法或答案来尝试解决这个问题吗？

css

来源：https://stackoverflow.com/questions/74869986/how-to-recolor-bootstrap-cards-border-color

2条答案

按热度按时间

jjhzyzn01#

在card-header上，似乎可以使用Bootstrap类（如border-bottom border-light），或者为此指定一个定制类或使用border-bottom: 1px solid #fff的内联样式。
有关Bootstrap上的边界类的详细信息：文件
有关边框的内联样式的详细信息：MDN
示例：

main {
background-color: #333;
color: #fff;
padding: 20px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<main>
<p>With Bootstrap class 👇</p>
<div class="card" style="width: 800px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
  <h5 class="card-header border-bottom border-light" style="color: white">Time Managing</h5>
  <div class="card-body" style="color: white">
    <h5 class="card-title">Prioritization</h5>
    <p class="card-text">Additional content.</p>
    <a href="#" class="btn btn-primary">Learn More</a>
  </div>
</div>
<br/>
<p>With inline style 👇</p>
<div class="card" style="width: 800px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
  <h5 class="card-header" style="border-bottom: 1px solid #fff; color: white">Time Managing</h5>
  <div class="card-body" style="color: white">
    <h5 class="card-title">Prioritization</h5>
    <p class="card-text">Additional content.</p>
    <a href="#" class="btn btn-primary">Learn More</a>
  </div>
</div>
</main>

赞(0）回复(0）举报 2022-12-24

tjjdgumg2#

你好，它看起来像你的css的语法，如果关闭稍微试试这个。

.card {
  border-color: white;
}

之后，颜色应该是你定义的颜色，通常每行不应该超过一个，所以<css-property>:<value>;，在这种情况下，你要修改的css属性是border-color，值是白色。
看看你对另一个答案的评论，如果它是.card-header底部的边框，你应该在.card-header类上设置相同的边框颜色值，确保你正在修改的类已经有了其他所需的边框属性，比如宽度。
在这些情况下，使用开发工具在任何浏览器上进行调试都是非常方便的，这将允许你在浏览器中检查和修改不同的css样式，我经常在添加css代码之前这样做，以确保样式是正确的，并且会起作用，特别是在使用第三方框架如Bootstrap时。

赞(0）回复(0）举报 2022-12-24

我来回答

css 如何重新着色引导卡边框颜色？

2条答案

相关问题

热门标签

最新问答