如何使带有圆角边框的元素的内容也圆角？答案

【问题标题】：How to make the contents of an element with round-cornered border be also round-cornered?如何使带有圆角边框的元素的内容也圆角？
【发布时间】：2011-09-20 22:13:39
【问题描述】：

http://jsfiddle.net/XjsWZ/

我正在尝试使用 CSS3 让白框本身具有圆角以及透明的灰色边框。这可能吗？

html:

<div class="outer"><div class="inner"></div></div>

css:

.outer{
    width: 300px;
    height: 300px;
    border: solid 10px;
    border-radius: 5px;
    border-color: rgba(0, 0, 0, 0.5);    
}

.inner{
    border-radius 5px;    
}

奖金问题： Chrome 角落里的那些黑色方块是怎么回事？

编辑：我发现了一个关于黑色方块的讨论：Weird border opacity behavior in Webkit?

【问题讨论】：

如果这个问题对未来的搜索者有用，最好将问题代码放在问题和答案代码中，因为所有这些 jsfiddles 可能不会留在原地。跨度>
edit 从 jsfiddle 添加了 html/css。

标签： html css

【解决方案1】：

http://jsfiddle.net/XjsWZ/3/ 可能吗？

** 编辑 **

I prefer JamWaffles':

.outer{
    width: 290px;
    height: 290px;
    border: solid 10px;
    border-radius: 15px;
    border-color: rgba(0, 0, 0, 0.5); 
    background-clip:padding-box;
    background-color:white;
    padding: 5px;  
}

或者，如果您想要 different looking corners，还有 Jedidiah 的变体：

.outer{
    width: 300px;
    height: 300px;
    background-clip:padding-box;
    background-color: rgba(0,0,0,0.5);
    border: solid 10px rgba(0,0,0,0.5);
    border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/
}

.inner{
    border-radius: 5px;
    background-color: white;
    height: 100%;
}

【讨论】：

我本来是这么想的，但是觉得有点太复杂了。
现在我在 Chrome 中检查它，角落里也有黑色方块...所以实际上我建议使用 JamWaffles 解决方案或他的建议并将 rgb 更改为颜色名称或十六进制值，比如：jsfiddle.net/XjsWZ/8
偷我的代表干什么！开玩笑；很好的答案，你比我更需要它:-)

【解决方案2】：

JamWaffles 的答案更简洁，但如果您确实想使用嵌套的 div 标签和半透明边框来实现这一点，您可以在外部 div 上设置背景颜色以匹配边框颜色，您还需要设置 background-clip: padding-box; 所以边框和背景不重叠。

示例： http://jsfiddle.net/XjsWZ/7/

css:

.outer{
    width: 300px;
    height: 300px;
    background-clip:padding-box;
    background-color: rgba(0,0,0,0.5);
    border: solid 10px rgba(0,0,0,0.5);
    border-radius: 5px;
}

.inner{
    border-radius: 5px;
    background-color: white;
    display:block;
    width: 100%;
    height: 100%;
}

html:

<div class="outer"><div class="inner"></div></div>

【讨论】：

This works the same，是否有理由将background-clip: padding-box; 用于外部，将display:block; 用于内部？（你也可以删除width: 100%;）我实际上更喜欢这个解决方案，因为它不使用position: relative;、left和top。
@AJP background-clip 用于透明度，在原始 css 中 @Muhd 的外边框为 50% 黑色，如果您也将背景颜色设为 50% 黑色，则边框后面会出现重叠.其他位可以出来。

【解决方案3】：

这会稍微改变盒子的外观，但如果边框半径大于边框的宽度，你也会得到内圆角。

例如here。我已经删除了内部 div，因为该示例不需要它，因为我假设您嵌套只是为了实现圆角效果。

关于black squares in the corners，我对 Chromium 12 完全没有任何了解。您可以尝试使用普通的十六进制颜色而不是 RGBA 颜色。对于您当前的颜色，它是#808080，尽管我很欣赏半透明的需要；这是用于 Facebox 样式的弹出窗口？

【讨论】：

是的，它用于弹出窗口。使用您的解决方案，黑色方块消失（我使用的是 Chrome 13）。谢谢。

【解决方案4】：

http://jsfiddle.net/XjsWZ/10/

这似乎是一个很好的解决方案，虽然它在技术上不使用边框，但它保持了正确的 alpha 值，同时摆脱了 webkit 中的黑色方块：

css:

.outer{
    width: 300px;
    height: 300px;
    background-clip:padding-box;
    background-color: rgba(0,0,0,0.5);
    border: solid 10px rgba(0,0,0,0.5);
    border-radius: 5px;
}

.inner{
    border-radius: 5px;
    background-color: white;
    display: block;
    width: 280px;
    height: 280px;
    position: relative;
    top: 10px;
    left: 10px;
}

html:

<div class="outer"><div class="inner"></div></div>

【讨论】：