box-shadow 阴影右下脚折边效果
效果展示:
阴影右下脚折边效果
代码片段:
<style type="text/css"> .boxshadow { width: 300px; min-height: 300px; margin: 30px; display: inline-block; background: #fff; border: 1px solid #ccc; position:relative; text-align:center; } .boxshadow1{ padding: 0 0 1px 0; background: #f3f3f3; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3)); background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff); background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff); background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff); border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-radius: 0 0 60px 0 / 0 0 60px 0; box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); } .boxshadow1:before{ content:''; width: 25px; height: 20px; position: absolute; bottom:0; right:0; border-radius: 0 0 30px 0; box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); } /*这里,我们做出的褶皱阴影*/ .boxshadow1:after{ content: ''; z-index: -1; width: 100px; height: 100px; position:absolute; bottom:0; right:0; background: rgba(0, 0, 0, 0.2); display: inline-block; box-shadow: 20px 20px 8px rgba()0,0,0,0.2; -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); transform: rotate(0deg) translate(-45px,-20px) skew(20deg); } </style>html 页面:
<div class="boxshadow boxshadow1"> <p>阴影右下脚折边效果</p> </div>
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:dacesmiling@qq.com