如何使具有圆角边框的元素的内容也是圆角的？

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?

来源

2011-09-20 Muhd

如果这个问题是要对未来搜索有用的，这将是最好将问题代码放在答案中的问题和答案代码中，因为所有这些jsfiddles可能不会保留。 –

**编辑**从jsfiddle中添加html/css。 – Jedidiah

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

来源

2011-09-20 22:21:44 AJP

我原本以为这个，但是我认为它有点太复杂。 – Bojangles

现在我在Chrome中检查它，我也在角落里看到了黑色方块......所以实际上我建议使用JamWaffles解决方案或他的建议，并将rgb更改为颜色名称或十六进制值，如：http：// jsfiddle.net/XjsWZ/8/ – AJP

Whatchoo doin'偷我的代表！开玩笑;好的答案，你需要它比我更多:-) – Bojangles

这将改变盒子的外观有点，但如果圆角半径比边框的宽度，你会得到内心圆角也是。

示例here。我已经删除了内部div，因为它不需要这个例子，因为我已经做出了嵌套的假设，只是为了实现圆角效果。

关于black squares in the corners，我根本没有得到任何铬12。您可以尝试使用正常的十六进制颜色，而不是RGBA之一。对于你目前的颜色，它是#808080，虽然我很欣赏对半透明的需求;这是用于Facebox风格的弹出窗口？

来源

2011-09-20 22:19:44 Bojangles

是的，这是一个弹出窗口。使用你的解决方案，黑色方块消失（我使用的是Chrome 13）。谢谢。 – Muhd

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>

来源

2011-09-20 22:46:20 Jedidiah

[This works same same]（http://jsfiddle.net/XjsWZ/9/），是否有一个原因包括'background-clip：padding-box ;'为外部和'显示：块;'为内部？（你也可以删除'width：100％;'）我更喜欢这个解决方案，因为它不使用'position：relative;'，'left'和'top'。 – AJP

@AJP'background-clip'是用于透明的，在原始的css中@Muhd的外边框是50％的黑色，如果你将背景色设置为50％，那么在边框后面会出现重叠。其他位可以出来。 – Jedidiah

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

看起来这将是一个很好的解决方案，虽然在技术上不使用边框，它aintains而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>

来源

2011-09-20 23:35:46 Muhd

如何使具有圆角边框的元素的内容也是圆角的？

回答

相关问题