CSS3边框阴影,折角效果演示
CSS3边框阴影,折角效果演示代码,主要说明一下,使用:before来制作底部阴影,并对阴影进行旋转的扭曲和位移设置,使用:after来制作顶部的阴影,并对阴影进行旋转的扭曲和位移设置。
代码如下:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>CSS3边框阴影,折角效果演示</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, #f3f3f3 10%, #fff); background: -o-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff); /*设置Box的阴影效果*/ -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset; box-shadow: 0px 3px 30px rgba(0, 0, 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, 0, 0.1); -moz-box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1); box-shadow: 20px 20px 15px rgba(0, 0, 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,-40px) skew(0deg,32deg) rotate(-25deg); transform: translate(-35px,-40px) skew(0deg,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, 0, 0.2); -moz-box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2); box-shadow: -10px -10px 15px rgba(0, 0, 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> <div class="box box1"><p>Box1</p></div> </div> </body> </html>
效果如下:
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。
三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!
四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.
五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源,请注明转载来自并附带链接
七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com
大家评论
站长推荐
点击排行
- 1CSS控制文字在Div最底部显示
- 2Thinkphp5如何配置IP+端口访问项目模块
- 3elementUI el-dialog弹框居中
- 4教你如何搭建及优化站点
- 5国内互联网视频行业运营分析
- 6连接SQL Server数据库提示:Login failed for user 'sa'错误的解决方案
- 7记一次Thinkphp5.1框架mysql数据库崩溃(SQLSTATE [08004] Too many connections)
- 8CSS实现悬浮顶部的Div工具栏
- 9service mysql start出错,mysql不能启动,解决mysql: unrecognized service错误
- 10Thinkphp3.2在centos7上设置计划任务的方法