常用阴影效果box-shadow

box-shadow: offset-x offset-y blur spread color position; 

 

http://www.iyangqiong.com/web/318.html

 

 实例：

<style>
 .box{width: 100px; height: 100px; margin: 80px; position: relative; }
    .shadow { box-shadow: 0 20px 40px #888; }
    .left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
    .right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }
</style>

<div class="box1 shadow"></div>
<div class="box1 left"></div>
<div class="box1 right"></div>

 

 

 

转载于:https://www.cnblogs.com/shimily/articles/7942704.html