当前位置：文江博客在线工具自定义您的 CSS 边框

自定义您的 CSS 边框

使用此工具，您可以简单地增加点之间的间距、更改破折号长度或笔划之间的距离。

宽度：

高度：

注意：它不会影响生成的样式。

笔划宽度： {{ currentStyle.width }}

短划线数组

随机

这是一系列可见/不可见的间隔。

线条上限

短划线偏移： {{ currentStyle.dashOffset }}

圆角半径：{{ currentStyle.borderRadius }}

使用方法

只需复制输出并将其粘贴到您的 CSS 代码中即可。例如：

.block {
   width: 100px;
   height: 100px;
   /* dashed border */
   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 属性不支持自定义 border-style，因此，我们在里面使用了一个 SVG 图像的技巧 background-image 属性，SVG 特性使我们能够更改虚线之间的距离、设置自定义图案、添加虚线偏移甚至更改线帽。生成的 SVG 图像是矢量，它以 100% 填充元素的宽度和高度，因此元素的大小无关紧要。