如何使用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/