下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家,也给大家做个参考。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding:0;} body {margin: 0; padding: 20px 100px;background-color: #f4f4f4;} pre{max-height:200px;overflow:auto;} div.demo {overflow:auto;} .box { width: 300px; min-height: 300px; margin: 30px; display: inline-block; background: #fff; border: 1px solid #ccc; position:relative; } .box p { margin: 30px; color: #aaa; outline: none; } /*=========Box1===========*/ .box1{ background: -webkit-gradient(linear,0% 20%,0% 100%,from(#fff),to(#fff),color-stop(.1,#f3f3f3)); background: -webkit-linear-gradient(0% 0%,#fff,#f3f3f3 10%,#fff); background: -moz-linear-gradient(0% 0%,#fff); background: -o-linear-gradient(0% 0%,#fff); /*设置Box的阴影效果*/ -webkit-box-shadow: 0px 3px 30px rgba(0,0.1) inset; -moz-box-shadow: 0px 3px 30px rgba(0,0.1) inset; box-shadow: 0px 3px 30px rgba(0,0.1) inset; /*制作右下脚折边效果*/ -moz-border-radius: 0 0 6px 0 / 0 0 50px 0; -webkit-border-radius: 0 0 6px 0 / 0 0 50px 0; border-radius: 0 0 6px 0 / 0 0 50px 0; } /*使用:before来制作底部阴影,并对阴影进行旋转的扭曲和位移设置*/ .box1:before{ content: ''; width: 50px; height: 100px; position:absolute; bottom:0; right:0; -webkit-box-shadow: 20px 20px 10px rgba(0,0.1); -moz-box-shadow: 20px 20px 15px rgba(0,0.1); box-shadow: 20px 20px 15px rgba(0,0.1); z-index:-1; -webkit-transform: translate(-35px,-40px) skew(0deg,30deg) rotate(-25deg); -moz-transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg); -o-transform: translate(-35px,32deg) rotate(-25deg); transform: translate(-35px,32deg) rotate(-25deg); } /*使用:after来制作顶部的阴影,并对阴影进行旋转的扭曲和位移设置*/ .box1:after{ content: ''; width: 100px; height: 100px; top:0; left:0; position:absolute; display: inline-block; z-index:-1; -webkit-box-shadow: -10px -10px 10px rgba(0,0.2); -moz-box-shadow: -10px -10px 15px rgba(0,0.2); box-shadow: -10px -10px 15px rgba(0,0.2); -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg); -moz-transform: rotate(7deg) translate(20px,25px) skew(20deg); -o-transform: rotate(7deg) translate(20px,25px) skew(20deg); transform: rotate(7deg) translate(20px,25px) skew(20deg); } </style> </head> <body> <div class="demo"> <div class="box box1"><p>Box1</p></div> </div> </body> </html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。