除了使用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?
答案 0 :(得分:3)
http://jsfiddle.net/XjsWZ/3/也许?
** 修改 **
.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)
看起来这是一个很好的解决方案,虽然它在技术上不使用边框,它在保留正确的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>