是否可以使用radius创建轮廓边框？
是否可以使用radius创建轮廓边框？
提问于 2013-02-15 21:43:52
我知道你可以用CSS3添加一个轮廓边框。
outline: 10px solid red;现在，我想知道如何才能在轮廓边框中添加半径。
我试过这个，但不起作用：
.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;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2013-02-15 22:18:55
Firefox has a property -moz-outline-radius，然而，在WebKit中实现类似功能的请求是closed as WONTFIX。未来的计划是make the outlines follow the borders。
我知道这没有多大帮助，但对你的问题的答案是:目前，没有(不是以跨浏览器的方式)。同时，你应该使用另一种方法，就像卡拉班建议的那样。
Stack Overflow用户
发布于 2013-02-15 21:57:07
尝试使用CSS-Tricks' Infinite Borders technique并应用border-radius。
这种方法需要边框和box-shadow，而不是轮廓。
img {
border-radius: 4px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3
outline: 5px solid hsl(0, 0%, 60%); */
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px red,
0 0 0 15px orange,
0 0 0 20px yellow,
0 0 0 25px green,
0 0 0 30px blue;
/* If you could do pseudo elements
you could get a few more... */
/* Also, HSL is awesome but don't use it if
you need super old browser support */
}
body { padding: 50px; text-align: center; }<img src="https://www.randomlists.com/img/animals/chipmunk.jpg">
Stack Overflow用户
发布于 2017-01-03 23:25:32
@MichaelYaeger类似于user1685185的答案，但使用更新的JSFiddle，使用border-radius和box-shadow。使用圆形按钮(bootstrap)周围的“边框”显示此JS Fiddle，但同样适用于图像等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14896099
复制相关文章
相似问题
腾讯云开发者
