使用HTML Div只在顶部和底部添加边框？

Question

我使用HTML DIV标签与边框格式化我的头是这样的：

<h3 style="background-color:red; padding:2% 0 2% 0; border:5px solid green"> 
This is a header 
</h3> 

不过，我想有只出现在顶部和底部，但不是在左，右的边界。我想用左上角和右下角的填充方式来填充边框，但边框没有这个特性（或者我不知道？）。有什么方法可以用CSS样式来做到这一点？

Answer 1

只是一个案例：

<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> 

Answer 2

border-top: 5px solid green; border-bottom: 5px solid green;

您应该直接把这个款式上<h3>而不是包装它周围的股利。

Answer 3

您可以分别指定border-rightborder-left ...。

Answer 4

可以使用border-left，border-right，border-top和border-bottom性质给予不同的边框样式，您的容器的两侧。

对于您的情况，您希望将自己的风格应用于border-top和border-bottom。

Answer 5

你可以像这样指定边界：

<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> 

Answer 6

您可以使用你的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;

Answer 7

为了将来的参考，以下是避免必须多次定义边界属性（颜色，宽度）并允许与用于边距和填充（如所请求的）类似的声明的替代方法。

border: 5px green; 
border-style: solid none; 

与余量或填充，border-style在顶部的顺序定义，右，下，左。上述情况在元素的顶部和底部应用实线边框，并且元素的左侧或右侧没有边框。

使用此方法避免了在声明中创建冗余。