如何在css3中創建邊框

Question

如何在css3的幫助下創建邊框，如下圖所示。

Answer 1

有水平和垂直半徑邊界半徑符號，

border-radius: horizontal-radius/vertical-radius; 

使用這個，你可以創建所需的邊界。

.border { 
 
    width: 250px; 
 
    height: 50px; 
 
    border: 1px dashed #aaa; 
 
    border-radius: 50%/20%; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    font-size: 30px; 
 
    color: red; 
 
    font-family: Helvetica; 
 
}

<div class="border">Text Here</div>

根據您的需要修改邊界值。

Answer 2

您可以使用邊框半徑來獲得div的'彎曲'邊框。除了添加虛線邊框，您還可以爲文字添加大小寫和文字對齊。

結果

div { 
 
    width: 250px; 
 
    height: 50px; 
 
    font-family: Helvetica; 
 
    border: 1px dashed gray; /*Makes dashed border*/ 
 
    border-radius: 50%/10px; /*Change the px value in order to change border curvature*/ 
 
    text-align: center; 
 
    line-height: 50px; 
 
    font-size: 30px; 
 
    color: red; 
 
    text-transform:uppercase; 
 
}

<div>Text Here</div>