CSS3圆角和虚线边框？

Question

是否可以在CSS3中创建一个边框，使其圆角和点缀？

我正在四处转弯，但看起来很坚固：

border: 1px dotted gray;
-moz-border-radius-topright: 30px 20px;
-moz-border-radius-topleft: 30px 20px;

边框的其余部分是虚线，但角落是实心的。

据我所知，这是针对Firefox的，但现在还可以。

由于

Answer 1

这是firefox中的一个错误。看到issue，mozilla不支持圆角和虚线边框。

Answer 2

我设法偶然找到了解决方案。

以下是代码：

PivotFilters

Answer 3

是的，理论上你可以有点状和圆形边框，但正如你所看到的，实际上浏览器可能还不支持它。

Answer 4

一种解决方案是使用多个背景图像。您可以使用此方法为四个角指定不同的background-image。

您可能还想为中心背景图像添加第五张图像（必要时重复）。

有些事情......

.dashed-rounded-border {

    border: 2px dashed blue;

    background-image: url("top-left.png"), url("top-right.png"), url("bottom-right.png"), url("bottom-left.png"), url("center.png");
    background-position: left top, right top, right bottom, left bottom, center center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;

    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;

}

Answer 5

我对此问题的解决方案是

background: url('../images/dot.png');
background-size: 4px;
background-position: bottom left;
background-repeat: repeat-x;

确保点图像只是一个点，在其两侧有一些空白区域。在那之后你应该很好。

Answer 6

Blockquote：可以使用

border-style: none;
border-top-style: dotted;
border-width: thick;

Answer 7

这两行代码将使您的边框变成圆角或点状。

• border: 4px;我们正在设置边框的大小以使其更明显（由您决定）
• border-style:dotted none none none;我们将border-top-style:dotted;等设置为none

hr{
border: 4px;
border-style:dotted none none none;
/* border-style:none;
  border-top-style: dotted; */
width:100px;
}
  

<hr>