用css实现自定义虚线边框

[wengjq]

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

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

基本效果如下：

在线演示CodePen Demo -- dottedBorder

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

[zhoutian94]

that's great