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

Question

好的，我知道这些属性都不完全受支持，但我还是在使用它们：P

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

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

Answer 1

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

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

更多 CSS3 魔法检查这个链接： http ://css3please.com/

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

Answer 2

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

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

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

好了，你可以像通常对边框所做的那样，为盒子阴影本身添加一个半径。