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

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

您应该将此样式直接放在<h3>上，而不是在它周围包裹div。

Answer 4

您可以在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，将左右边框设置为1 px .... border-width：3px 1px;

Answer 5

您可以单独指定border-right border-left ....

Answer 6

您可以使用border-left，border-right，border-top和border-bottom属性为容器的每一侧提供不同的边框样式。

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

Answer 7

您可以像这样指定边框：

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

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

7 个答案: