使用邊界半徑和箱陰影在一起（CSS）

Question

好吧，我知道這兩個屬性都完全被支持，但我使用他們無論如何：P

當我添加邊框半徑和箱陰影（有和沒有供應商前綴），邊框半徑的半徑對於陰影不是透明的。 例如：http://cndg.us/3f41a0

這是可以解決的嗎？我也注意到，-webkit-box-shadow在隱藏div中存在一些問題。

Answer 1

可以檢查此： http://jsfiddle.net/Zw4QA/1/

我認爲你有圓形corders您的div內的元素。您必須將角應用於此元素。此刻父元素上的圓角不會應用於子元素，除非您在CSS中指定它。

更多的CSS3魔法檢查此鏈接： http://css3please.com/

要知道，每一個瀏覽器都有自己的處理陰影和邊界半徑 http://thany.nl/apps/boxshadows/

Answer 2

不，現在不可能。這兩個屬性並不真正和對方相處得很好。我建議使用圓角的CSS和基於圖像的陰影解決方案，如果你只是必須有圓角和陰影。

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; 

你去那裏，所以你要添加一個半徑盒子陰影本身就像你通常會做一個邊框。