同时使用边框半径和框阴影 (CSS)

Question

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

当我添加 border-radius 和 box-shadow（有和没有供应商前缀）时，border-radius 的半径对 box-shadow 不透明。 示例：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

对于带有单元格的表格：

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 3

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

Answer 4

您可以为 div 创建一个 border-radius 或 box-shadow 将只创建阴影

generator border radius and box shadow 查找实时代码：https://css-box-shadows.com/css-box-shadow-generator/

Answer 5

如果你使用

overflow-hidden

属性。删除它就可以了

Answer 6

在我父亲的网站上闲逛时，我发现您可以将半径特性添加到阴影中。所以我在一个 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;

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