css画一条渐变的虚线

效果展示

css画一条渐变的虚线_第1张图片

原理:给元素设置一个渐变的背景色,画一条白色的虚线盖住背景,就达到了渐变虚线的效果 

代码:

.pending-line{
    width: 101px;
    border-top: 2px dashed #fff; // dotted这个会密一点
    background: linear-gradient(to right, rgba(163, 77, 0, 0.4), rgba(163, 77, 0, 1));
    background-origin: border-box;
}

你可能感兴趣的:(css,前端)