Question

除了使用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?

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

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

Answer 3

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

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

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

Answer 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>

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

4 个答案: