底部边框在此 CSS/HTML 代码中不起作用答案

【问题标题】：Bottom Border not Working in this CSS/HTML code底部边框在此 CSS/HTML 代码中不起作用
【发布时间】：2022-10-18 19:32:39
【问题描述】：

我目前正在学习 Web 开发，目前在 CSS 部分，然后我想在底部添加一个边框，但边框没有呈现。我试图寻找很多解决方案，但似乎没有用，如果有人帮助我解决这个问题，我会非常高兴。

<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="card borderblue">
            <div class="borderblue">
                <img class="avatar" src="images/traffy.jpg" alt="Trafalgar Law from the Series One Piece">
            </div>
            <div class="borderblue">
                <h3>Trafalgar D. Water Law</h3>
                <p>Surgeon of Death</p>
                <h4>Devil Fruit:Ope Ope no Mi</h4>
            </div>
        </div>
    </body>
</html>

body {
margin: 20px;
    
}

.avatar {
    width: 150px;
}

.card {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    padding: 20px;
    display: flex;
    justify-content:  space-around;
    text-align: center;
    background: #ddebf8;
    color: #2b2839;
    border-bottom:10px solid #a491f1;
    /*
    black - #2b2839 (the text color)
    blue - #ddebf8 (card color)
    purple - #d8cefe (border color)
    */

}

.borderblue{
    border: 1px dotted blue;
}

【问题讨论】：

你有 card 和 borderblue 都有一个边框，外部 div 使用这两者<div class="卡片边框蓝色">.并且borderBlue优先。

标签： html css web-frontend

【解决方案1】：

现在，您已将 .borderblue 类应用于您的 .card div。因为该类最后出现在您的 css 中，所以它将是应用于您的卡片 div 的类，覆盖您当前拥有的边框底部。

根据您要达到的效果，您可以将borderblue 类移到css 中的.card 类之前。这将打开 10px 底部边框，以及卡片其余部分周围的虚线边框。

或者，您可以从卡上的 div 中删除borderblue 类。这也会产生底部边框，但会移除卡片其余部分的虚线。

【讨论】：

非常感谢，这帮助了很多！代码按预期工作:)

【解决方案2】：

如果您想要特定的底部边框，请添加 !important。喜欢：

border-bottom:2px solid red !important;

由于borderblue 类，您的边框底部无法正常工作。

【讨论】：