Html 是否可以创建带有半径的轮廓边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14896099/
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
Is it possible to create an outline border with radius?
提问by Caspert
I known you can add an outline border with CSS3.
我知道您可以使用 CSS3 添加轮廓边框。
outline: 10px solid red;
Now I was wondering how I can add also a radius to that outline border.
现在我想知道如何向该轮廓边框添加半径。
I have tried this one, but doesn't work:
我试过这个，但不起作用：
.radius {
padding: 20px 60px;
text-transform: capitalize;
-moz-outline: 10;
outline: 10px solid red;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
回答by
Try using CSS-Tricks' Infinite Borders techniqueand applying border-radius.
尝试使用CSS-Tricks 的无限边框技术并应用border-radius.
This method will require borders and box-shadowand not outline.
这种方法需要边框box-shadow而不是轮廓。
回答by robertc
Firefox has a property -moz-outline-radius, however the request to implement a similar feature in WebKit was closed as WONTFIX. The plan for the future is to make the outlines follow the borders.
Firefox 有一个属性-moz-outline-radius，但是在 WebKit 中实现类似功能的请求被关闭为 WONTFIX。未来的计划是使轮廓遵循边界。
I realize this doesn't help much, but the answer to your question is: currently, no (not in a cross browser way). In the meantime you should use an alternative approach like the one suggested by thekalaban.
我意识到这没有多大帮助，但您问题的答案是：目前，没有（不是以跨浏览器的方式）。同时，您应该使用另一种方法，例如 thekalaban 建议的方法。
回答by RyNo's
@MichaelYaeger Similar answer to user1685185 but with an updated JSFiddle, use border-radiusand box-shadow. This JS Fiddle is shown using a "border" around a circular button (bootstrap), but the same applies an image, etc.
@MichaelYaeger 与 user1685185 类似的答案，但具有更新的JSFiddle，使用border-radius和box-shadow。此 JS Fiddle 使用圆形按钮（引导程序）周围的“边框”显示，但同样适用于图像等。
