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

这样就可以更加灵活的设置虚线效果了。

推荐阅读:

phpsStorm实现打开*.jsp文件代码高亮和代码格式化

Linux下如何重置MySQL密码

【笔记】5.2学习小程序用到的网站和资料

JetBrains IDE Support 浏览器自动刷新插件(不定时更新)

设置 letter-spacing 后文字不能居中的解决方法

赞 (2)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)