是否可以在CSS中控制虚线边框笔划之间的长度和距离?
下面的示例在不同的浏览器中显示不同:
div {
border: dashed 4px #000;
padding: 20px;
display: inline-block;
}
<div>I have a dashed border!</div>
最大的区别: IE 11 / Firefox / Chrome
有没有什么方法可以更好地控制虚线边框的外观?
发布于 2010-05-05 15:20:55
Css渲染是浏览器特定的,我不知道它有什么微调,你应该按照Ham的建议处理图像。参考:http://www.w3.org/TR/CSS2/box.html#border-style-properties
发布于 2020-05-24 00:31:48
@kovart开发了一个很酷的工具,叫做dashed border generator。
它使用svg作为背景图像,允许设置您想要的笔划破折号数组,非常方便。
然后,您只需将其用作元素的背景属性,而不是边框:
div {
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='black' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
padding: 20px;
display: inline-block;
}
发布于 2010-05-05 15:03:25
简短的一句:不,不是。相反,您将不得不使用图像。
https://stackoverflow.com/questions/2771171
复制相似问题