使用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: 5px green;
border-style: solid none;

与边距或填充一样,border-style按照顶部,右侧,底部,左侧的顺序定义.上面的情况将一个实线边框应用于元素的顶部和底部,并且没有边框指向元素的左侧或右侧.

使用此方法可避免在声明中创建冗余.

Answer 3

您可以在 css 或 style 标记中使用以下内容......

#div-id {
width: 100px;
height: 50px;
border-style: solid;
border-width: 1px 0;
border-color: #000;
}

使用边框宽度选择器，您可以定义各种边框厚度。这些值按照上、右、下、左的顺序插入，速记版本是上/下和右/左，这就是我使用的。

例如，您可以设置一个div，其上边框为4px，右边框为3px，下边框为2px，左边框为1px，如下所示.... border-width: 4px 3px 2px 1px;

您可以使用以下命令将顶部和底部边框设置为 3px，将左右边框设置为 1 px .... border-width: 3px 1px;