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

【问题标题】：Use HTML Div to add border only on top and bottom?使用 HTML Div 仅在顶部和底部添加边框？
【发布时间】：2011-09-15 16:58:05
【问题描述】：

我使用 HTML DIV 标签来格式化带有边框的标题，如下所示：

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

但是，我希望边框只出现在顶部和底部，而不是左右。我希望边框与左下角和右上角的填充相同，但边框没有此功能（或者我不知道？）。 CSS样式有什么方法可以做到这一点吗？

【问题讨论】：

标签： html

【解决方案1】：

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

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

【讨论】：

不错。它适用于 w3schools 互动页面：w3schools.com/tags/tryit.asp?filename=tryhtml_div_test

【解决方案2】：

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

【讨论】：

【解决方案3】：

只是一个例子：

<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。它没有工作

【解决方案4】：

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

在您的情况下，您希望将您的样式应用于border-top 和border-bottom。

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

您可以在您的 css 或样式标签中使用以下内容 ....

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

【讨论】：

【解决方案7】：

为了将来参考，以下是一种替代方法，它避免了多次定义边框属性（颜色、宽度）并允许声明类似于用于边距和填充的声明（根据要求）。

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

与边距或内边距一样，border-style 是按上、右、下、左的顺序定义的。上述情况在元素的顶部和底部应用了实线边框，在元素的左侧或右侧没有边框。

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

【讨论】：

我认为这是最好的解决方案，因为它避免了重复。
正是我想要的！ +1