是否可以创建带有半径的轮廓边框？ [英] Is it possible to create an outline border with radius?

问题描述

我知道你可以用CSS3添加大纲边框。

I known you can add an outline border with 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;    
}

推荐答案

Firefox有一个属性 -moz-outline-radius ，但是在WebKit中实现类似功能的请求是关闭为WONTFIX 。未来的计划是使边框沿着边框。

我意识到这没有什么帮助，但你的问题的答案是：目前，没有（不是在一个跨浏览器的方式）。在此期间，您应该使用替代方法，如kalaban建议的方法。

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.

这篇关于是否可以创建带有半径的轮廓边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！