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

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;    
}

3 个解决方案

#1

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建议的替代方法。

#2

Try using CSS-Tricks' Infinite Borders technique and applying border-radius.

尝试使用CSS-Tricks的Infinite Borders技术并应用border-radius。

This method will require borders and box-shadow and not outline.

此方法将需要边框和框阴影而不是轮廓。

Here is the fiddle link

这是小提琴链接

#3

@MichaelYaeger Similar answer to user1685185 but with an updated JSFiddle, use border-radius and 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小提琴使用圆形按钮（引导程序）周围的“边框”显示，但同样适用于图像等。