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

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

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;

你去了，所以你正在向盒子阴影本身添加一个半径，就像你通常对边框一样。

Answer 5

不，现在不可能。这两个属性彼此之间并不是很好。我推荐使用CSS作为圆角，并为阴影设置一个基于图像的解决方案，如果你只需要带有阴影的圆角。

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

5 个答案: