如何用css创建虚线半径边框？

Question

我正在尝试创建一个半径边框，但不是使用实心样式，而是使用虚线样式。

这是demo的实心样式，但我希望它是虚线样式。

div{
    width: 200px;
    height: 200px;
    border: 2px dashed;
    position: relative;
}
div:after{
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    z-index: 2;
    top: 15px;
    right: -29px;
    border-top: 2px dashed;
    border-left: 2px solid #fff;
    border-right: 2px dashed;
    border-bottom: 2px dashed;
    border-radius: 0 25px 0 0;
}

---

---

更新

它在chrome中运行，即使用firefox也没有，我使用的是firefox版本28。

Answer 1

可悲的是，这听起来像firefox中的一个错误：

bugzilla 382721

这意味着您必须使用图片或其他内容使其看起来像在Chrome中一样。非常讨厌。

尝试使用此lnk http://www.css3.info/preview/border-image/

请注意，我无法保证是否可以使用border-image获得所需的效果，但似乎可能是这样。

Answer 2

如果您的小盒子没有任何内容，您可以使用另一个伪元素来创建一个蒙版。 的 DEMO

div:before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 3;
    top: 15px;
    right: -29px;
    border-radius:100%;
    box-shadow:inset 0 0 0 5px white, 0 0 0 5px white;;
    border:solid transparent 5px;
}

---

实际上，最好只向mozillas浏览器提供此功能： DEMO

@-moz-document url-prefix() { 
    div:before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 3;
    top: 15px;
    right: -29px;
    border-radius:100%;
    box-shadow:inset 0 0 0 5px white, 0 0 0 5px white;;
    border:solid transparent 5px;
}
}

Answer 3

这是Firefox的一个限制。每种类型的圆角看起来都像border-style:solid。为了更好地理解，您可以查看this示例。