如何在css3中创建边框

Question

如何使用css3创建边框，如下图所示。

Answer 1

水平和垂直半径有一个边界半径表示法

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

使用此功能可以创建所需的边框。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

根据需要修改边框值。

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>