logo标签列表

Firefox中应用边框半径的虚线边框长度错误

htmlcssfirefox
3
我注意到在 div 上应用虚线边框以及 border-radius 会导致 "dashed" 长度错误。请查看下面的图像，在角附近出现问题，该问题仅在 Firefox 44 和 46 上出现，并且在 Chrome 49 上看起来很好。

enter image description here

看起来是FF中的一个bug。我知道在FF上border-radius存在问题，但我想知道是否有解决方法。

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#target {
  width: 300px;
  height: 300px;
  background-color: red;
  border: 10px dashed purple;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
}
<div id="target"></div>

2
虚线边框渲染问题已经存在很长时间了（最初FF甚至不使用50％的border-radius进行渲染）。最好使用SVG，例如此答案中（该形状不同，因此我认为这不是完全重复）。 - Harry
1个回答
1
使用CSS属性border无法实现此目的。
CSS渲染是浏览器特定的，我认为唯一的解决方法是使用图像。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接