您的位置:首页 > Web前端 > CSS

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

2019-08-08 20:21 495 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/Sing_a_song_again/article/details/98884443

在开发过程中,有画出虚线的需求:

如果使用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可以控制每个虚线的高度

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: