Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Firefox BUG 圆角强制边框实线

  元素的边框样式除了最常用的实线(solid)之外还有虚线(dashed)、点线(dotted)等,这是早起的CSS版本中就有的。当这些非实线与圆角属性(border-radius)同时使用时,在Firefox上就会出问题。Firefox的圆角会强制把不连续的线条连起来。
  下面是BUG重现 <span style="
  display:inline-block;
  width:100px;height:100px;
  border:2px dashed red;
  border-radius:100%;
"></span>
<span style="
  display:inline-block;
  width:100px;height:100px;
  border:2px dashed green;
  border-radius:30%;
"></span>

  这显然是个BUG,在CSS方面目前我也没有什么解决方法,只能等Firefox自己修复这个BUG了。但如果只是需要实现虚线的效果可以考虑使用SVG: <svg width="104px" height="104px">
  <circle
    cx="52" cy="52" r="51"
    stroke="blue"
    stroke-width="2"
    stroke-dasharray="6"
    fill="transparent"
  />
</svg>

网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^