如何使用CSS實現這種陰影效果？

Question

我正在嘗試實現圖像中顯示的陰影效果。

我不知道如何使用CSS來達到這樣的陰影效果。 我嘗試使用box-shadow ：

box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

影響如下： 效果不理想。 我怎樣才能獲得那種微弱的陰影效果？

Answer 1

請觀看此演示： https : //jsfiddle.net/sdz6p4qf/

使用的CSS：

body {
  background-color: #CCC;
}
.rect {
  position: relative;
  margin-left: 50px;
  margin-top: 50px;
  width: 200px;
  height: 300px;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.16);
  background-color: #FFF;
}

我修改的是增加模糊半徑並增加偏移量Y。

Answer 2

嘗試這個。 這是非常基本的。 您可以使圓角，陰影的不透明度級別等。

 div.shadow { width: 284px; padding: 10px 10px 20px 10px; border: 1px solid #BFBFBF; background-color: white; box-shadow: 10px 10px 5px #aaaaaa; } 

 <div class="shadow"> <p class="caption">This is a sample text box. </p> <p class="caption">This is a sample text box. </p> <p class="caption">This is a sample text box. </p> </div> 

Answer 3

試試這個CSS：

  -webkit-box-shadow: -2px 41px 79px -48px rgba(0,0,0,0.75);
  -moz-box-shadow: -2px 41px 79px -48px rgba(0,0,0,0.75);
   box-shadow: -2px 41px 79px -48px rgba(0,0,0,0.75)

Answer 4

嘗試這個：

-webkit-box-shadow: 0px 39px 40px -30px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 39px 40px -30px rgba(0,0,0,0.3);
box-shadow: 0px 39px 40px -30px rgba(0,0,0,0.3);

Answer 5

查看我的答案：

解決方案1

 body{ margin:30px; } .a1{ height:100px; width:300px; border-radius:10px; background-color:white; -webkit-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75); box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75); } .b1{ height:100px; width:300px; border-radius:10px; background-color:grey; -webkit-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75); box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75); } 

 <div class="a1"> </div> <br><br><br> <div class="b1"> </div> 

解決方案2

 body{ margin:30px; } .a2{ height:100px; width:300px; border-radius:10px; background-color:white; -webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75); box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75); } .b2{ height:100px; width:300px; border-radius:10px; background-color:grey; -webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75); box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75); } 

 <div class="a2"> </div> <br><br><br> <div class="b2"> </div> 

解決方案3

 body{ margin:30px; } .a3{ height:100px; width:300px; border-radius:10px; background-color:white; -webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);} .b3{ height:100px; width:300px; border-radius:10px; background-color:grey; -webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);} 

 <div class="a3"> </div> <br><br><br> <div class="b3"> </div> 

解決方案4

 body{ margin:30px; } .a4{ height:100px; width:300px; border-radius:10px; background-color:white; -webkit-box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75); box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75); } .b4{ height:100px; width:300px; border-radius:10px; background-color:grey; -webkit-box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75); box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75); } 

 <div class="a4"> </div> <br><br><br> <div class="b4"> </div> 

解決方案5

 body{ margin:30px;} .a5{ height:100px; width:300px; border-radius:10px; background-color:white; -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.36); box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.36); } .b5{ height:100px; width:300px; border-radius:10px; background-color:grey; -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.36); box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.36); } 

 <div class="a5"> </div> <br><br><br> <div class="b5"> </div> 

如果要創建其他自定義陰影，請使用在線框陰影生成器

造訪： https : //www.cssmatic.com/box-shadow，https : //html-css-js.com/css/generator/box-shadow/