對CSS3

Question

我試圖使用CSS3實現這個3D效果陰影效果的3D效果，

這是我迄今爲止嘗試：

border-radius: 12px; 
    box-shadow: 0px 0px 11px #000000; 

Answer 1

http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

嘗試這個。它在盒子陰影上提供了幾種樣式。

Answer 2

.shadow-bottom { 
    -webkit-box-shadow: 0 8px 6px -6px black; 
     -moz-box-shadow: 0 8px 6px -6px black; 
      box-shadow: 0 8px 6px -6px black; 
} 

Answer 3

要製作像上面的圖像一樣的陰影，你必須在CSS3標籤之前使用並應用於div。

.effect 
{ 
    position:relative;  
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
} 

.effect:before, .effect:after 
{ 
    content:""; 
    position:absolute; 
    z-index:-1; 
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); 
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); 
    box-shadow:0 0 20px rgba(0,0,0,0.8); 
    top:10px; 
    bottom:10px; 
    left:0; 
    right:0; 
    -moz-border-radius:100px/10px; 
    border-radius:100px/10px; 
} 
.effect:after 
{ 
    right:10px; 
    left:auto; 
    -webkit-transform:skew(8deg) rotate(3deg); 
    -moz-transform:skew(8deg) rotate(3deg);  
    -ms-transform:skew(8deg) rotate(3deg);  
    -o-transform:skew(8deg) rotate(3deg); 
    transform:skew(8deg) rotate(3deg); 
} 

訪問stupidcodes.com更多示例...