CSS：边框虚线、文本下划波浪线

一：边框虚线

方式一：border-style: dashed/dotted

浏览器效果：

<!--html-->
<div class="dashed box">dashed</div>
<div class="dotted box">dotted</div>
 
<!--css-->
.box {
    margin: 10px auto;
    width: 300px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: #fff;
}
.dashed {
    border: 1px dashed #333;
}
.dotted {
    border: 1px dotted #333;
}复制

实现了虚线的效果，但UI设计师一般不会给这种效果图。如需定制，且往下看。

方式二：渐变linear-gradient

部分线设置—浏览器效果：

<div class="box line-h">上 / 下虚线</div>
 
<!--css-->
.line-h {
    background-image: linear-gradient(to right, #333 50%, transparent 0);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    /*上，不设置background-position，默认是上虚线*/
    /*background-position: 0 0;*/
    /*下*/
    /*background-position: 100% 100%;*/
}复制

<div class="box line-v">左 / 右虚线</div>
 
<!--css-->
.line-v {
    background-image: linear-gradient(to bottom, #333 50%, transparent 0);
    background-size: 1px 10px;
    background-repeat: repeat-y;
    /*左，不设置background-position，默认是左虚线*/
    /*background-position: 0 0;*/
    /*右*/
    /*background-position: 100% 100%;*/
}复制

上面的两种效果，都是10px*1px的虚线（其中5px的实线【#333】，5px的虚线）。

整个边框线设置—浏览器效果：

<div class="box dashed-full">dashed-full</div>
 
<!--css-->
.dashed-full {
    box-sizing: border-box;
    border: 1px solid transparent;
    /*方式一：50%*/
    background: linear-gradient(white, white) padding-box,
        linear-gradient(180deg, #333 50%, transparent 0) 0 0 / 10px 10px,
        linear-gradient(90deg, #333 50%, transparent 0) 0 0 / 10px 10px;
    /*方式二：5px*/
    background: linear-gradient(white, white) padding-box,
        linear-gradient(180deg, #333 5px, transparent 0) 0 0 / 10px 10px,
        linear-gradient(90deg, #333 5px, transparent 0) 0 0 / 10px 10px;
    /*方式三：修改background-size */
    background: linear-gradient(white, white) padding-box,
        linear-gradient(180deg, #333 50%, transparent 0) 0 0 / 100% 10px,
        linear-gradient(90deg, #333 50%, transparent 0) 0 0 / 10px 100%;
}复制

方式三：渐变repeating-linear-gradient

浏览器效果：

<div class="box dashed-lean1">dashed-lean1</div>
<div class="box dashed-lean2">dashed-lean2</div>
<div class="box dashed-lean3">dashed-lean3</div>
 
<!--css-->
/*px方式*/
.dashed-lean1 {
    border: 1px solid transparent;
    /*3.5px代表了条纹自身的宽度，如果想要5px的实线部分，等于=5/√2 ≈3.5px*/
    background:
            linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg, #333 0, #333 3.5px, white 0, white 7px);
}
 
/*%方式*/
.dashed-lean2 {
    border: 1px solid transparent;
    background:
            linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg,
            #333 0, #333 25%, white 0, white 50%
            ) 0 / 10px 10px;
}
 
/*色标位置值支持两个*/
.dashed-lean3 {
    border: 1px solid transparent;
    background:
            linear-gradient(white,white) padding-box,
            repeating-linear-gradient(-45deg, #333 0 25%, white 0 50%) 0 / 10px 10px;
}
 
/*linear-gradient方式*/
.dashed-lean4 {
    border: 1px solid transparent;
    background:
            linear-gradient(white,white) padding-box,
            linear-gradient(-45deg, #333 0, #333 25%, white 0, white 50%, #333 0, #333 75%, white 0);
    background-size: 10px 10px;
}复制

要实现10px*1px的虚线（其中5px的实线【#333】，5px的虚线）。repeating-linear-gradient是设置px还是百分比，设置的值有差异，注意区分。

此时，细看dashed-lean1和dashed-lean2的效果是倾斜的。这里，dashed-lean1或者dashed-lean2任选其一即可，因px需要计算且不是准确的值，更建议dashed-lean2的方式。

说明：

1. 色标位置值支持最多两个值，补充了dashed-lean3 方式
2. linear-gradient方式同样可以实现，补充了dashed-lean4 方式

Tips：既然方式二可以实现虚线，方式三存在的原因是，方式二自带bug。方式二中，若.box的宽 / 高自适应，很容易出现 右 / 下 边框是实现的情况。要实现整个边框的虚线，建议方式三。

二：文本下划波浪线

方式一：text-decoration

浏览器效果：

<div class="wavy">wavy--文本</div>
 
<!--css-->
.wavy {
    text-decoration: underline wavy red;
}复制

 多行文本都支持波浪线。缺点：波浪线不能定制，且吃藕。

方式二：svg

浏览器效果：

<div class="wavy-svg">这里是一段测试文字.....---svg</div>
 
<!--css-->
.wavy-svg{
    display: inline-block;
    text-decoration: none;
    background: url("data:image/svg+xml,\
    <svg xmlns='http://www.w3.org/2000/svg' \
    viewBox='0 0 20 4'><path fill='none'\
    stroke='#ff3300' d='M 0 3.5 c 5 0 5 -3 10 -3 s 5 3 10 3 5-3 10-3 5 3 10 3'/>\
    </svg>") repeat-x 100% 100% / 20px;
}复制

多行文本的情况只会有一条线。

方式三：radial-gradient

浏览器效果：

<span class="highlighted-txt">这里是一段测试文字<span class="underline-wavy"></span></span>
 
<!--css-->
.highlighted-txt {
    position: relative;
    color: #f00;
    font-size: 10px;
    display: inline-block;
}
.underline-wavy {
    /*修改这里的字体大小，更灵活的设置波浪线。*/
    /*这里不设置，继承父元素highlighted-txt的字体大小也是可以的*/
    font-size: 12px;
}
.underline-wavy:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.5em;
    width: 100%;
    height: 1em;
    background:
            radial-gradient(circle at 50% 1.3em, transparent 24%, #f00 28%, transparent 32%),
            radial-gradient(circle at 50% -0.3em, transparent 24%, #f00 28%, transparent 32%),
            transparent;
    background-size: 1em 1em;
    background-position: 0px -0.5em, 0.5em 0.5em;
    background-repeat: repeat-x;
}复制

多行文本的情况只会有一条线。且效果失真。字体越大，屏幕分辨率越高，失真效果越明显。

有其他方式，欢迎讨论。

The end.