Question

我编写的代码使边框显示在网站的顶部，但边框显示在代码的所有4个边上。请指正。的 JSFiddle

#box1{
    height: 50px;
    background-color:#DFE4E6;
    padding: 20px;
    border-style: solid;
    border-top: thick single #000;
}
.center{
    text-align: center;
}

<div id="box1">
       <h3 class="center"> CALL US</h3>
        
</div>

Answer 1

那是因为：

规则border-style: solid。

删除：

border-style: solid;           /* -- remove this */
border-top: thick solid #000;  /* make the style solid here */

border-style适用于所有边界。您需要将样式限制为border-top。

single不是一种风格。你可能在这里意味着solid。

小提琴：http://jsfiddle.net/abhitalks/jpo80bjr/3/

＆＃13;

#box1{
    height: 50px;
    background-color:#DFE4E6;
    padding: 20px;
    border-top: thick solid #000;
}
.center{ text-align: center; }

＆＃13;

<div id="box1">
       <h3 class="center"> CALL US</h3>
</div>

＆＃13;

Answer 2

尝试将其他边框定义为0px，例如：

＆＃13;

#box1{
    height: 50px;
    background-color:#DFE4E6;
    padding: 20px;
    border-style: solid;
    border-top: thick single #000;
    border-bottom:0;
    border-left:0;
    border-right:0;
}
.center{
    text-align: center;
}

＆＃13;

<div id="box1">
       <h3 class="center"> CALL US</h3>
</div>

＆＃13;

Answer 3

你可以写三个独立的属性：

border-width: ..;
border-style: ..;
border-color: ..;

或您可以将它们合并为一个速记属性：

border: .. .. ..;

border-style相当于在border中设置样式，它适用于所有方面。如果您只想设置顶部边框样式，那么border-top-style就可以了。但是，由于您无论如何都要设置border-top速记属性，只是摆脱border-style。

Answer 4

这是因为你设置的border-style: solid;适用于所有四个边框（顶部，右边，底部，左边），默认为黑色和~4像素。另外，单身并不是有效的边界值。

试试这个：

#box1{
    height: 50px;
    background-color:#DFE4E6;
    padding: 20px;
    border-top: thick solid #000;
}

Answer 5

将border-style: solid;更改为border-top-style: solid;

<强> JSFiddle

#box1
{
    height: 50px;
    background-color:#DFE4E6;
    padding: 20px;
    border-top-style: solid;
    border-top: thick single #000;
}
.center
{
    text-align: center;
}

<div id="box1">
    <h3 class="center">CALL US</h3>
</div>

Answer 6

修复你的CSS。某些浏览器自动完成你没有指定的css比例，基于你所做的那些，例如边框，在你的情况下：

＆＃13;

#box1{
    height: 50px;
    background-color:#DFE4E6;
    padding: 20px;
    border-style: solid;
    border-color: #000;
    border-width: thick 0 0 0;
}
.center{
    text-align: center;
}

＆＃13;

<div id="box1">
       <h3 class="center"> CALL US</h3>

</div>

＆＃13;

Answer 7

删除border-style：solid;因为你已经在border-top中使用了：thick solid＃000;单身需要坚实。使用css：

#box1{
    height: 50px;
    background-color:#DFE4E6;
    padding: 20px;
    border-top: thick solid #000;
}

找到 fiddle demo

使边框显示在顶部

7 个答案: