html - 是否可以创建具有半径的轮廓边框？

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 的无限边框技术并应用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">

Answer 2

Firefox 有一个属性-moz-outline-radius，但是在 WebKit 中实现类似功能的请求被关闭为 WONTFIX。未来 的 计划 是使 轮廓 遵循 边界.

我意识到这并没有多大帮助，但您的问题的答案是：目前，否（不是跨浏览器的方式）。同时，您应该使用另一种方法，例如 thekalaban 建议的方法。

Answer 3

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