使用HTML Div只在顶部和底部添加边框?
我使用HTML DIV标签与边框格式化我的头是这样的:使用HTML Div只在顶部和底部添加边框?
<h3 style="background-color:red; padding:2% 0 2% 0; border:5px solid green">
This is a header
</h3>
不过,我想有只出现在顶部和底部,但不是在左,右的边界。我想用左上角和右下角的填充方式来填充边框,但边框没有这个特性(或者我不知道?)。有什么方法可以用CSS样式来做到这一点?
只是一个案例:
<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-top: 5px solid green; border-bottom: 5px solid green;
您应该直接把这个款式上<h3>
而不是包装它周围的股利。
您可以分别指定border-right
border-left
...。
可以使用border-left
,border-right
,border-top
和border-bottom
性质给予不同的边框样式,您的容器的两侧。
对于您的情况,您希望将自己的风格应用于border-top
和border-bottom
。
你可以像这样指定边界:
<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>
您可以使用你的CSS或样式标签下面....
#div-id {
width: 100px;
height: 50px;
border-style: solid;
border-width: 1px 0;
border-color: #000;
}
使用边框宽度选择,你可以定义各种边界厚度。这些值按照顶部,右侧,底部,左侧的顺序插入,缩写版本是顶部/底部和右侧/左侧,这是我用过的。
例如,您可以使用4px的上边框,3px的右边框,2px的下边框和1px的左边框来设置div,如下所示.... border-width:4px 3px 2px 1px;
您可以将顶部和底部边框设置为3px,将左右边框的边框设置为1px,并使用以下内容.... border-width:3px 1px;
为了将来的参考,以下是避免必须多次定义边界属性(颜色,宽度)并允许与用于边距和填充(如所请求的)类似的声明的替代方法。
border: 5px green;
border-style: solid none;
与余量或填充,border-style
在顶部的顺序定义,右,下,左。上述情况在元素的顶部和底部应用实线边框,并且元素的左侧或右侧没有边框。
使用此方法避免了在声明中创建冗余。
我认为这是最好的解决方案,因为它避免了重复。 – 2015-01-11 09:45:47
不错。它在w3schools交互式页面中工作:http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test – 2011-06-15 16:37:02