如何使用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样式中有没有任何方法可以实现这一点？

- David.Chu.ca

Answer 1

以下是一种可避免重复定义边框属性（颜色、宽度）并允许类似于 margin 和 padding 的声明的替代方法，供以后参考。

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

与边距（margin）或内边距（padding）一样，border-style 属性按照上、右、下、左的顺序定义。以上例子将元素的上下两侧设置为实线边框，而左右两侧不设置边框。

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

- user1823021

---

我认为这是最好的解决方案，因为它避免了重复。 - Farid Nouri Neshat

正是我所需要的！+1 - Zakariya Qureshi

Answer 2

只是一个简单的情况：

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

- Chris

---

难道没有简写方式吗？我尝试了类似于 border: 5px solid green initial 5px solid green initial 的语法，但它并没有起作用。 - Ridhuvarshan

Answer 3

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

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

使用border-width选择器可以定义各种不同的边框厚度。值按照顺序从上到下、从右到左插入，简写版本是top/bottom和right/left，这就是我使用的方式。

例如，您可以使用以下代码设置一个具有4像素顶部边框、3像素右侧边框、2像素底部边框和1像素左侧边框的div... border-width: 4px 3px 2px 1px;

您可以使用以下代码将顶部和底部边框均设置为3像素，将左侧和右侧边框设置为1像素... border-width: 3px 1px;

- Alan

Answer 4

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

您应该直接将这种样式放在 <h3> 上，而不是将div包裹在外面。

- Brad

---

不错。它在w3schools的交互页面中运行良好：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test - David.Chu.ca

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>

- Tim S. Van Haren

Answer 6

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

- Pekka

Answer 7

您可以使用border-left、border-right、border-top和border-bottom属性为容器的每个边框设置不同的样式。

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

- James Allardice