是否可以在CSS3 box-shadow中設置透明度？

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>