CSS 虚线边框生成器

在线生成各种效果的虚线边框 CSS 代码

用法示例

.div {
    width: 100px;
    height: 100px;
    /* 生成的虚线边框代码 */
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

实现原理

原生 CSS 属性不支持自定义边框样式。现在，借助背景图像属性中可以使用 SVG 的特性，我们可以实现更多炫酷的边框效果：SVG 能够更改虚线之间的距离、设置自定义图案、添加虚线偏移，甚至更改线条端点样式（线帽）。因为生成的 SVG 图像是矢量的，它将元素的宽度和高度填充 100%，因此可以直接兼容任意大小的元素。

工具原作者：@kovart