CSS CSS3 圆角和虚线边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3718215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Rounded and Dotted borders?
提问by jmcmahon
Is it possible to create a border in CSS3 such that they are rounded and dotted?
是否可以在 CSS3 中创建一个边框，使它们是圆角和点状的？
I'm rounding my corners but they appear solid with:
我正在绕过我的角落，但它们看起来很坚固：
border: 1px dotted gray;
-moz-border-radius-topright: 30px 20px;
-moz-border-radius-topleft: 30px 20px;
The rest of the border is dotted but the corners are solid.
边框的其余部分是虚线，但角是实心的。
I understand that this is specific to Firefox but that's fine for now.
我知道这是特定于 Firefox 的，但现在没问题。
Thanks
谢谢
回答by Srinivas Reddy Thatiparthy
回答by Pbalazs89
I managed to find a solution by accident.
我设法偶然找到了解决方案。
Here's the code:
这是代码：
background-color: none !important;
border:none !important;
border-top: 5px dotted #70c1bb !important;
border-top-width:5px;
border-right-width:0px;
border-bottom-width:0px;
border-left-width:0px;
回答by RoToRa
Yes, theoretically you can have dotted and rounded borders, but as you have seen practically browsers may not support it yet.
是的，理论上你可以有虚线和圆角边框，但正如你所看到的，浏览器可能还不支持它。
回答by ban-geoengineering
One solution is to use multiple background images. You can use this approach to specify a different background-imagefor the four corners.
一种解决方案是使用多个背景图像。您可以使用这种方法为background-image四个角指定一个不同的角。
You may also want to add a fifth image for the centre background image (repeated, if necessary).
您可能还想为中心背景图像添加第五张图像（如有必要，重复）。
Something along the lines of...
类似的东西...
.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;
}
回答by Brady Edgar
My solution for this issue is
我对这个问题的解决方案是
background: url('../images/dot.png');
background-size: 4px;
background-position: bottom left;
background-repeat: repeat-x;
make sure the dot image is just one dot with some white space on wither side of it. After that you should be good.
确保点图像只是一个点，在它的枯萎侧有一些空白。在那之后你应该很好。
