Html 如何使一个边框为圆角的元素的内容也为圆角？

我试图使用CSS3使白框本身除了透明的灰色边框外，还具有圆角。这可能吗

html:

奖金问题： 铬合金墙角的黑色方块是怎么回事

---

编辑：我发现了一个关于黑色正方形的讨论：

这将稍微改变长方体的外观，但是如果边框半径大于边框宽度，则也会得到内部圆角

例如。我删除了内部的

div

，因为示例中不需要它，因为我假设嵌套只是为了实现舍入效果

---

关于角落里的

黑色方块

，铬12一点也没有。您可以尝试使用普通的十六进制颜色，而不是RGBA颜色。对于您当前的颜色，它是

808080

，尽管我很欣赏半透明的需要；这是用于Facebox样式的弹出窗口？

这将稍微改变框的外观，但如果边框半径大于边框宽度，则也会得到内部圆角

例如。我删除了内部的

div

，因为示例中不需要它，因为我假设嵌套只是为了实现舍入效果

关于角落里的

黑色方块

，铬12一点也没有。您可以尝试使用普通的十六进制颜色，而不是RGBA颜色。对于您当前的颜色，它是

808080

，尽管我很欣赏半透明的需要；这是一个Facebox风格的弹出窗口？

可能吧

**编辑**

:

或者如果你想知道杰迪迪亚的变种：

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

也许吧

**编辑**

:

或者如果你想知道杰迪迪亚的变种：

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

---

JamWaffles的答案更清晰，但如果您确实想通过嵌套的div标签和半透明边框实现这一点，您可以在外部div上设置背景颜色以匹配边框颜色，您还需要设置

背景剪辑：填充框以便边框和背景不重叠

例如：

css:

html:

JamWaffles的答案更干净，但如果您确实想通过嵌套的div标签和半透明边框实现这一点，您可以在外部div上设置背景颜色以匹配边框颜色，您还需要设置
背景剪辑：填充框以便边框和背景不重叠

例如：

css:

html:



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

css:

html:



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

css:

html:


是的，它用于弹出窗口。使用您的解决方案，黑色方块消失（我使用的是Chrome 13）。谢谢。是的，这是一个弹出窗口。使用您的解决方案，黑色方块消失（我使用的是Chrome 13）。谢谢。我最初是这么想的，但是我觉得有点太复杂了。现在我在Chrome上检查它，我在角落里也有黑色的方块。。。所以实际上我建议使用JamWaffles解决方案，或者他的建议，并将rgb更改为颜色名称或十六进制值，比如：Whatchoo’t doin’steering my rep！开玩笑；很好的回答，你比我更需要它：-）我最初想到这个，但是我认为它有点太复杂了。现在我在Chrome中检查它，我在角落里也有黑色的方块。。。所以实际上我建议使用JamWaffles解决方案，或者他的建议，并将rgb更改为颜色名称或十六进制值，比如：Whatchoo’t doin’steering my rep！开玩笑；很好的答案，你比我更需要它：-）如果这个问题对未来的搜索者有用，最好把问题代码放在问题中，把答案代码放在答案中，因为所有这些JSFIDLE可能不会保持不变。edit从JSFIDLE中添加了html/css。如果这个问题对未来的搜索者有用，最好将问题代码放在问题中，将答案代码放在答案中，因为所有这些jsfiddle可能不会保持不变用于外部和
显示：块用于内部？（您可以删除
宽度：100%；
）我实际上更喜欢这个解决方案，因为它不使用
位置：相对
、
left
和
top
@AJP
背景剪辑
用于透明度，在原始css@Muhd中，外边框为50%黑色，如果将背景颜色也设为50%黑色，则边框后面会出现重叠。其他位可以出来，是否有理由包括
背景剪辑：填充框用于外部和
显示：块用于内部？（您可以删除
宽度：100%；
）我实际上更喜欢这个解决方案，因为它不使用
位置：相对
、
left
和
top
@AJP
背景剪辑
用于透明度，在原始css@Muhd中，外边框为50%黑色，如果将背景颜色也设为50%黑色，则边框后面会出现重叠。其他部分可以出来。
.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;  
}

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

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

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

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

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