使用css3的linear-gradient线性渐变实现虚线图形

在开发过程中，有画出虚线的需求：

如果使用border的dashed的属性，虽然也是虚线，但是不能控制每一个虚线的宽度

可以使用css3的linear-gradient进行虚线的绘制:

html：

<div class="dashedBorder"></div>

css:

.dashedBorder{
    height: 1px; 
    background:linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 14px,transparent 14px, transparent);
    background-size: 28px 100%;
}

上例中的14px可以控制每个虚线的宽度，height可以控制每个虚线的高度

若有疑问，可留言！
如有帮助，可给请作者的一杯咖啡添砖加瓦：