使用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在頂部的順序定義，右，下，左。上述情況在元素的頂部和底部應用實線邊框，並且元素的左側或右側沒有邊框。

使用此方法避免了在聲明中創建冗餘。