是否可以创建半径的轮廓边框？

Question

我知道你可以用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;    
}

Answer 1

尝试使用CSS-Tricks' Infinite Borders technique并应用border-radius。

此方法需要边框和box-shadow而不是大纲。

Here is the fiddle link

Answer 2

Firefox has a property -moz-outline-radius，但在WebKit中实现类似功能的请求是closed as WONTFIX。未来的计划是make the outlines follow the borders。

我意识到这没有多大帮助，但你的问题的答案是：目前，没有（不是以跨浏览器的方式）。在此期间，您应该使用类似thekalaban建议的替代方法。

Answer 3

@MichaelYaeger对user1685185的类似答案，但更新了JSFiddle，请使用border-radius和box-shadow。这个JS小提琴在圆形按钮（引导程序）周围使用“边框”显示，但同样适用于图像等。