div { width:200px; height:200px; border:1px solid #ccc; position: relative; background-color:#fff; float: left; text-align: center; margin: 30px; } .div1::after { z-index: -15; position: absolute; content: ""; bottom: 14px; right: 7px; width: 36%; top: 59%; max-width: 300px; background: #777; box-shadow: 0 15px 10px #A5A5A5; -webkit-transform: rotate(3deg); } .div1::before { z-index: -15; position: absolute; content: ""; bottom: 14px; left: 6px; width: 36%; top: 59%; max-width: 300px; background: #777; box-shadow: 0 15px 10px #A5A5A5; -webkit-transform: rotate(-3deg); } .div2 { border-bottom-right-radius: 50px; box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); } .div2::after { content: ''; width: 22px; height: 22px; position: absolute; bottom: 0px; right: 0px; border-radius: 0 0 16px 0; box-shadow: -2px -2px 5px rgba(65, 65, 65, 0.38); -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-10px,-10px); } .div3 { border-radius: 60px / 5px; } .div3::after { z-index: -15; position: absolute; content: ""; bottom: 2px; left: 4%; width: 91%; height: 10px; max-width: 300px; background: #777; box-shadow: 0px 4px 11px 1px #A5A5A5; border-radius: 50%; } .div3::before { z-index: -15; position: absolute; content: ""; left: 4%; width: 91%; height: 10px; top: 4px; max-width: 300px; background: #777; box-shadow: 0px -4px 11px 1px #A5A5A5; border-radius: 50%; }
<div class="div1">123</div> <div class="div2">123</div> <div class="div3">123</div>
http://jsfiddle.net/N93a3/
总结:
如果使用before或者after必须为其赋值一个content属性,为空,才能显示出效果。使用伪类的div一般设置成position:relative;伪类元素一般设置成position:absolute。实现阴影效果一般是利用伪类元素的box-shaw属性,且一般设置在div后面,被其挡住。div的border-radius可以设置成xxpx / xxpx 可以得到意想不到的效果。
Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1
| 本站CDN由 数掘科技 提供