同时使用border-radius和box-shadow（CSS）

Question

好的，我知道这些属性都还没有完全被支持，但我仍然在使用它们 :P

当我添加border-radius和box-shadow（带或不带厂商前缀）时，border-radius的半径对于box-shadow并不透明。 例如：http://cndg.us/3f41a0

有可能修复这个问题吗？我也注意到-webkit-box-shadow在隐藏的div上存在一些问题。

- Gary

Answer 1

您可以在此处检查： http://jsfiddle.net/Zw4QA/1/

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

如果想要了解更多 CSS3 的神奇特性，请查看此链接： http://css3please.com/

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

- meo

---

border-radius + box-shadow在Safari中仍然无法处理大数值（例如，如果您使用box-shadow为叠加层创建半透明背景），但在其他现代浏览器中可以正常工作：https://jsfiddle.net/Zw4QA/1622/ - Timothy Zorn

Answer 2

有时，如果父元素中有overflow: hidden CSS 属性，它也可能裁剪子元素的阴影。确保将其移除，就可以正常工作了。

- davidnguyen

---

那是我的情况，谢谢。 - undefined

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

- dylfin

---

有没有可能你能够解释一下这段代码，以便后来的人可以理解它，并且明白为什么它可能是对所提出问题的答案？ - Andrew Barber

我认为小提琴示例已经足够了。Border-radius和border-shadow对于表格的效果很好，但是border-radius不能限制表格单元格。它们需要自己的border-radius与表格border-radius匹配以限制背景填充。如果您不使用单元格背景，甚至不会注意到这一点。 - dylfin

我认为这是比被接受的答案更好的解决方案。唯一缺少的是解释。 - Sujit Kumar Singh

Answer 4

根据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%20rounded%20corners

- Daggie Blanqx - Douglas Mwangi

Answer 5

你可以为 div 创建一个 border-radius，或者使用 box-shadow 只创建阴影

生成器边框半径和盒子阴影查找实时代码：https://css-box-shadows.com/css-box-shadow-generator/

- HARI PRASAD GANGI

Answer 6

在我父亲的网站上闲逛时，我发现可以将半径特性添加到阴影中。因此，我在一个带有圆角（确切地说是0.7em）的div内部放置了一个日历，并希望为其添加一个投影，但这些投影几乎总是具有方形边缘，因此会与我的圆角产生冲突。我试着玩弄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;

你可以像给边框添加半径一样，给盒子阴影本身添加半径。

- RCCRF

---

这些是 CSS 的未知属性。 - Rutvij07