如何制作圆角边框元素的内容也是圆角的?

时间:2011-09-20 22:13:39

标签: html css css3

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?

4 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:2)

JamWaffles答案更清晰但如果您确实希望通过嵌套div标签和半透明边框实现此目的,您可以在外部div上设置背景颜色以匹配边框颜色,您还需要设置{{1}这样边框和背景不会重叠。

实施例: http://jsfiddle.net/XjsWZ/7/

的CSS:

background-clip: padding-box;

HTML:

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

答案 2 :(得分:1)

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

示例here。我删除了内部div,因为这个示例不需要,因为我假设你只是为了实现圆角效果而嵌套。

关于black squares in the corners,我对Chromium 12没有任何意义。您可以尝试使用普通的十六进制颜色而不是RGBA颜色。对于你当前的颜色,它是#808080,虽然我很欣赏需要半透明;这是Facebox风格的弹出窗口吗?

答案 3 :(得分:0)

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>