首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >控制虚线边框描边的长度和描边之间的距离

控制虚线边框描边的长度和描边之间的距离
EN

Stack Overflow用户
提问于 2010-05-05 15:01:27
回答 6查看 225.4K关注 0票数 161

是否可以在CSS中控制虚线边框笔划之间的长度和距离?

下面的示例在不同的浏览器中显示不同:

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}
<div>I have a dashed border!</div>

最大的区别: IE 11 / Firefox / Chrome

有没有什么方法可以更好地控制虚线边框的外观?

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2010-05-05 15:20:55

Css渲染是浏览器特定的,我不知道它有什么微调,你应该按照Ham的建议处理图像。参考:http://www.w3.org/TR/CSS2/box.html#border-style-properties

票数 25
EN

Stack Overflow用户

发布于 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;
}
票数 28
EN

Stack Overflow用户

发布于 2010-05-05 15:03:25

简短的一句:不,不是。相反,您将不得不使用图像。

票数 25
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2771171

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档