CSS3のボックスシャドウで透明度を設定することはできますか？

Question

ボックスの影に透明度を設定することはできますか？

これは私のコードです：

box-shadow:10px 10px 10px #000; 
    -webkit-box-shadow:10px 10px 10px #000; 
    -moz-box-shadow: 10px 10px 10px #000; 

Answer 1

私はrgba()がここに働くだろうと仮定します。結局、box-shadowとrgba()の両方のブラウザサポートはほぼ同じです。

/* 50% black box shadow */ 
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 

div { 
 
    width: 200px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    color: white; 
 
    background-color: red; 
 
    margin: 10px; 
 
} 
 

 
div.a { 
 
    box-shadow: 10px 10px 10px #000; 
 
} 
 

 
div.b { 
 
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
 
}

<div class="a">100% black shadow</div> 
 
<div class="b">50% black shadow</div>