同时使用边框半径和长方体阴影(CSS)
同时使用边框半径和长方体阴影(CSS)
提问于 2010-04-26 23:43:07
好吧，我知道这两个属性都还不完全受支持，但我还是在使用它们:P
当我添加一个边界半径和长方体阴影(有或没有供应商前缀)时，边界半径的半径对于长方体阴影是不透明的。示例：http://cndg.us/3f41a0
这个问题有可能解决吗？我还注意到-webkit-box-shadow与隐藏的div有一些问题。
回答 4
Stack Overflow用户
回答已采纳
发布于 2010-04-27 00:07:44
可以在此处进行检查：http://jsfiddle.net/Zw4QA/1/
我想你的div里面有一个圆角的元素。您必须将此元素的角点应用于。目前，父元素上的圆角不会应用于子元素，除非您在CSS中指定它。
要了解更多CSS3魔术，请查看此链接：http://css3please.com/
请注意，每个浏览器都有自己的阴影和边框半径处理方式 http://thany.nl/apps/boxshadows/
Stack Overflow用户
发布于 2020-12-06 03:36:01
根据MDN的文档，长方体阴影会自动拾取元素本身的边界半径。这里有一个链接：https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#:~:text=The%20box%2Dshadow%20property%20enables,on%20the%20same%20rounded%20corners
Stack Overflow用户
发布于 2012-09-27 18:09:29
对于包含单元格的表格：
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2714765
复制相关文章
相似问题
腾讯云开发者
