css 自定义长度间距虚线

最新推荐文章于 2025-05-09 12:59:54 发布

申多事儿

最新推荐文章于 2025-05-09 12:59:54 发布

阅读量3.5k

点赞数 2

CC 4.0 BY-SA版权

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_46031116/article/details/120086751

本文介绍了一种使用CSS实现可个性化定制虚线长度和间距的方法，通过结合linear-gradient和background-size属性，可以调整虚线段的长度、间距及宽度，从而创建独特的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器提供的dashed border画出来一直是一个样式，不能个性化定制虚线的长度以及间距，所以用这个方法画出可个性化定制的虚线。

background-image中，linear-gradient的第三个参数可以调整虚线每一段的长度显示百分比，结合background-size的第二个值（可设置虚线每一段总长度）使用。两者结合就可以调整虚线每一段之间的间距大小。
background-size的第一个值可以调整虚线的宽度。（可以设为100%，直接继承元素的宽度width）

.border {
    width: 90%;
    height: 1px;
    background-image: linear-gradient(to right, black 0%, black 50%, transparent 50%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    margin: 0 auto;
 }