box-shadow属性的基本用法
使用Box-shadow制作逼真的图片阴影效果
使用伪元素::before
和::after
,我们能实现非常逼真的只有图片才能实现的阴影效果。
HTML:
<div class="box11 shadow"></div>
CSS:
.box11 { width: 300px; height: 100px; background: #ccc; border-radius: 10px; margin: 10px; } .shadow { position: relative; max-width: 270px; box-shadow: 0px 1px 4px rgba(0,0,0,0.3), 0px 0px 20px rgba(0,0,0,0.1) inset; } .shadow::before, .shadow::after { content:""; position:absolute; z-index:-1; } .shadow::before, .shadow::after { content:""; position:absolute; z-index:-1; bottom:15px; left:10px; width:50%; height:20%; } .shadow::before, .shadow::after { content:""; position:absolute; z-index:-1; bottom:15px; left:10px; width:50%; height:20%; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); } .shadow::after{ right:10px; left:auto; transform:rotate(3deg); }
125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3134.html