用 CSS 实现自定义虚线边框

开发产品功能的时候ui往往会给出虚线边框的效果图，于是乎，我们往往第一时间想到的是用css里的border，可是border里一般就提供两种效果，dashed 或者 dotted，ui 这时就不满意了，说虚线太密了。废话不多说，下面直接给解决方案：

div {
    padding: 1em;
    border: 1px dashed transparent;
    background: linear-gradient(white,white) padding-box,
    repeating-linear-gradient(-45deg,#ccc 0, #ccc 0.25em,white 0,white 0.75em);
}

基本效果如下：

在线实例：https://www.cdsy.xyz/tools/runcode?name=example_css_dotte_border

以上的基本原理是通过两层线性渐变背景去覆盖，第一层是在 padding-box 容器内（及虚线边框的容器内的白色部分，如果换成 border-box 那肯定把虚线也覆盖了），用这一层去覆盖 repeating-linear-gradient 生成的条纹背景。具体的虚线的颜色和间距都可以通过 repeating-linear-gradient 生成的条纹背景去调整。最后给出 linear-gradient 支持的浏览器，要使用的话请权衡。