我使用HTML的DIV标签来格式化我的头部并添加边框,就像这样:
<h3 style="background-color:red; padding:2% 0 2% 0; border:5px solid green">
This is a header
</h3>
然而,我希望边框只出现在顶部和底部,而不是左侧和右侧。我希望边框与上下左右的填充方式相同,但是边框没有这个功能(或者我不知道如何设置?)。CSS样式中有没有任何方法可以实现这一点?
我使用HTML的DIV标签来格式化我的头部并添加边框,就像这样:
<h3 style="background-color:red; padding:2% 0 2% 0; border:5px solid green">
This is a header
</h3>
然而,我希望边框只出现在顶部和底部,而不是左侧和右侧。我希望边框与上下左右的填充方式相同,但是边框没有这个功能(或者我不知道如何设置?)。CSS样式中有没有任何方法可以实现这一点?
以下是一种可避免重复定义边框属性(颜色、宽度)并允许类似于 margin 和 padding 的声明的替代方法,供以后参考。
border: 5px green;
border-style: solid none;
与边距(margin)或内边距(padding)一样,border-style
属性按照上、右、下、左的顺序定义。以上例子将元素的上下两侧设置为实线边框,而左右两侧不设置边框。
使用这种方法可以避免在声明中创建冗余。
只是一个简单的情况:
<h3 style="background-color:red; padding:2% 0 2% 0; border-top:5px solid green; border-bottom: 5px solid green;">
This is a header
</h3>
border: 5px solid green initial 5px solid green initial
的语法,但它并没有起作用。 - Ridhuvarshan#div-id {
width: 100px;
height: 50px;
border-style: solid;
border-width: 1px 0;
border-color: #000;
}
border-top: 5px solid green; border-bottom: 5px solid green;
您应该直接将这种样式放在 <h3>
上,而不是将div包裹在外面。
您可以这样指定边框:
<h3 style="background-color:red; padding:2% 0 2% 0;
border-top:5px solid green; border-bottom:5px solid green">
This is a header
</h3>
您可以分别指定 border-right
和 border-left
...。
您可以使用border-left
、border-right
、border-top
和border-bottom
属性为容器的每个边框设置不同的样式。
在您的情况下,您想要将样式应用于border-top
和border-bottom
。