一起使用 border-radius 和 box-shadow (CSS)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2714765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using border-radius and box-shadow together (CSS)
提问by Gary
Ok, I know neither of these properties are completely supported yet, but I'm using them anyway :P
好的，我知道这些属性都没有被完全支持，但我还是在使用它们：P
When I add a border-radius and box-shadow (with and without vendor prefixes), the radius of the border-radius is not transparent to the box-shadow. Example: http://cndg.us/3f41a0
当我添加 border-radius 和 box-shadow（有和没有供应商前缀）时，border-radius 的半径对 box-shadow 不透明。示例：http: //cndg.us/3f41a0
Is this possible to fix? I've also noticed that -webkit-box-shadow has some issues with hidden divs.
这有可能解决吗？我还注意到 -webkit-box-shadow 有一些隐藏 div 的问题。
回答by meo
it is possible check here: http://jsfiddle.net/Zw4QA/1/
可以在这里检查：http: //jsfiddle.net/Zw4QA/1/
i think you have a element inside your div with the rounded corders. You have to apply the corners to this element to. At the moment rounded corners on the parent element will not apply to the children unless you specify it in your CSS.
我认为你的 div 中有一个带有圆形编码器的元素。您必须将角应用于此元素。目前，父元素上的圆角不适用于子元素，除非您在 CSS 中指定它。
for more CSS3 magic check this link: http://css3please.com/
如需更多 CSS3 魔法，请查看此链接：http: //css3please.com/
Be aware that every single browser has his own way of handling Shadows and border radiushttp://thany.nl/apps/boxshadows/
请注意，每个浏览器都有自己处理阴影和边框半径的方式http://thany.nl/apps/boxshadows/
回答by dylfin
For table with cells:
对于带有单元格的表格：
HTML
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
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;
}
回答by RCCRF
While dinking around on my father's website I discovered that you can add the radius characteristic to shadow. So I have a calendar inside a div, both have rounded edges (0.7em to be exact) and I wanted to add a drop shadow to it, but those almost always have a square edge and as such would clash with my rounded edges. Just messing around with box-shadow attribute and decide what if I add radius to it? So I did. Can't find anywhere online that mentions this technique so I might have discovered something unique. Anyways enough back story here's the codes:
在我父亲的网站上闲逛时，我发现您可以将半径特征添加到阴影中。所以我在 div 中有一个日历，两者都有圆边（准确地说是 0.7em），我想给它添加一个阴影，但那些几乎总是有一个方边，因此会与我的圆边冲突。只是搞乱 box-shadow 属性，然后决定如果我向它添加半径会怎样？所以我做了。在网上找不到任何提到这种技术的地方，所以我可能发现了一些独特的东西。无论如何，这里的代码有足够的背景故事：
CSS:
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;
There you go so you're adding a radius to the box shadow itself like you would normally do to a border.
这样你就可以向框阴影本身添加一个半径，就像你通常对边框所做的那样。
