一起使用border-radius和box-shadow (CSS)答案

【问题标题】：Using border-radius and box-shadow together (CSS)一起使用border-radius和box-shadow (CSS)
【发布时间】：2010-04-26 15:43:07
【问题描述】：

好的，我知道这两个属性都还没有被完全支持，但我还是在使用它们：P

当我添加边框半径和框阴影（带有和不带有供应商前缀）时，边框半径的半径对框阴影不透明。示例：http://cndg.us/3f41a0

这可以解决吗？我还注意到 -webkit-box-shadow 在隐藏 div 方面存在一些问题。

【问题讨论】：

标签： webkit css mozilla

【解决方案1】：

可以在这里查看： http://jsfiddle.net/Zw4QA/1/

我认为您的 div 中有一个带有圆角的元素。您必须将角应用于此元素。目前，除非您在 CSS 中指定，否则父元素上的圆角将不适用于子元素。

欲了解更多 CSS3 魔法，请查看此链接： http://css3please.com/

请注意，每个浏览器都有自己处理阴影和边框半径的方式 http://thany.nl/apps/boxshadows/

【讨论】：

border-radius + box-shadow 仍然会在 safari 中中断较大的值（即，如果您使用 box-shadow 为覆盖创建半透明背景），但适用于其他现代浏览器：jsfiddle.net/Zw4QA/1622

【解决方案2】：

根据 MDN 的文档，box-shadow 会自动选择元素本身的边框半径。这是一个链接：https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#:~:text=The%20box%2Dshadow%20property%20enables,on%20the%20same%20rounded%20corners

【讨论】：

【解决方案3】：

对于带有单元格的表格：

JSFiddle

HTML

<table>
    <tr>
        <td class='one'>One</td>
        <td class='two'>Two</td>
    </tr>
    <tr>
        <td colspan="2" class='three'>Three</td>
    </tr>
</table>

CSS

body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 padding: 100px;
 background: pink;
}

table {
/* basic */
 background-color: #fff;
 margin: 0 auto;
 width: 200px;
 padding: 100px;
 text-align: center;
/* border-radius */
 border-radius: 20px;
/* box-shadow */
 box-shadow: rgba(0,0,0,0.8) 0 0 10px;
 border-collapse: collapse;
}

table td{
  color: white;
}

td.one{
    border-radius: 20px 0 0 0;
    background-color: black;
}
td.two{
    border-radius: 0 20px 0 0;
    background-color: darkgreen;
}
td.three{
    border-radius: 0 0 20px 20px;
    background-color: darkred;
}

【讨论】：

您能否解释一下这段代码，以便后来出现的人能够理解它，以及为什么它可能是对所提出问题的回答？
我认为小提琴的例子就足够了。边框半径和边框阴影适用于表格，但边框半径不限制表格单元格。它们需要自己的边框半径与表格边框半径匹配以限制背景填充。当您不使用单元格背景时，您甚至不会注意到这一点。
我会说这是一个比接受的答案更好的解决方案。它唯一缺少的就是解释。

【解决方案4】：

在我父亲的网站上闲逛时，我发现你可以将半径特性添加到阴影中。所以我在 div 中有一个日历，两者都有圆形边缘（准确地说是 0.7em），我想给它添加一个阴影，但那些几乎总是有一个方形边缘，因此会与我的圆形边缘发生冲突。只是弄乱 box-shadow 属性并决定是否向它添加半径？所以我做了。在网上找不到任何提到这种技术的地方，所以我可能发现了一些独特的东西。无论如何，这里有足够的背景故事代码：

CSS：

box-shadow-bottom-right-radius: 0.7em; //you can enter whatever value you want
box-shadow-bottom-left-radius: 0.7em;
box-shadow-top-right-radius: 0.7em;
box-shadow-top-left-radius: 0.7em;

这样你就可以像通常对边框一样为盒子阴影本身添加一个半径。

【讨论】：