CSS border dashed属性虚线间隔不可控的解决方法
CSS 的 border 属性，可以设置实线，虚线还有点线。不过直接使用 border: 1px dashed #F00 虚线距离太小，非常难看，很难满足UI图的效果。
可以使用 background 背景的渐变属性，来替代 border 方案，方法如下：
width: 100%;
height: 1px;
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 8px 1px;
background-repeat: repeat-x;也可以使用 SVG 线条设置间距：
path {
stroke-dasharray: 4;
stroke-dashoffset: 22;
}这样就可以更加灵活的设置虚线效果了。
声明：本文由w3h5原创，转载请注明出处：《CSS border dashed属性虚线间隔不可控的解决方法》 https://cloud.tencent.com/developer/article/1538755
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
