- 浏览: 2203525 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1240)
- mac/IOS (287)
- flutter (1)
- J2EE (115)
- android基础知识 (582)
- android中级知识 (55)
- android组件(Widget)开发 (18)
- android 错误 (21)
- javascript (18)
- linux (70)
- 树莓派 (18)
- gwt/gxt (1)
- 工具(IDE)/包(jar) (18)
- web前端 (17)
- java 算法 (8)
- 其它 (5)
- chrome (7)
- 数据库 (8)
- 经济/金融 (0)
- english (2)
- HTML5 (7)
- 网络安全 (14)
- 设计欣赏/设计窗 (8)
- 汇编/C (8)
- 工具类 (4)
- 游戏 (5)
- 开发频道 (5)
- Android OpenGL (1)
- 科学 (4)
- 运维 (0)
- 好东西 (6)
- 美食 (1)
最新评论
-
liangzai_cool:
请教一下,文中,shell、C、Python三种方式控制led ...
树莓派 - MAX7219 -
jiazimo:
...
Kafka源码分析-序列5 -Producer -RecordAccumulator队列分析 -
hp321:
Windows该命令是不是需要安装什么软件才可以?我试过不行( ...
ImageIO读jpg的时候出现javax.imageio.IIOException: Unsupported Image Type -
hp321:
Chenzh_758 写道其实直接用一下代码就可以解决了:JP ...
ImageIO读jpg的时候出现javax.imageio.IIOException: Unsupported Image Type -
huanghonhpeng:
大哥你真强什么都会,研究研究。。。。小弟在这里学到了很多知识。 ...
android 浏览器
运行效果:
css:
html:
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); } /*==========Box2============*/ .box2{ 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; -webkit-border-radius: 0 0 60px 0 / 0 0 60px 0; -moz-border-radius: 0 0 60px 0 / 0 0 60px 0; border-radius: 0 0 60px 0 / 0 0 60px 0; -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); } .box2:before{ content:''; width: 25px; height: 20px; position: absolute; bottom:0; right:0; -webkit-border-radius: 0 0 30px 0; -moz-border-radius: 0 0 30px 0; border-radius: 0 0 30px 0; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); 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); } /*这里,我们做出的褶皱阴影*/ .box2: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; -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2); 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); } /*==========Box3=========*/ .box3{ padding: 5px 0 ; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); 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); -webkit-border-radius: 60px / 5px; -moz-border-radius: 60px / 5px; border-radius:60px / 5px; -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset; box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset; } .box3:before{ content: ''; width: 50px; height: 50px; top:0; right:0; position:absolute; display: inline-block; z-index:-1; -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); transform: rotate(2deg) translate(-14px,20px) skew(-20deg); } .box3:after{ content: ''; width: 100px; height: 100px; top:0; left:0; position:absolute; z-index:-1; display: inline-block; -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg); -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg); -o-transform: rotate(2deg) translate(20px,25px) skew(20deg); transform: rotate(2deg) translate(20px,25px) skew(20deg); } /*============Box4==============*/ .box4{ padding: 5px 0 ; background: #fff; background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2)); background: -webkit-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff ); background: -moz-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff ); background: -o-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff ); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); } .box4:before{ content: ''; width: 50px; height: 50px; top:0; right:0; position:absolute; z-index: -1; -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); transform: rotate(2deg) translate(-14px,20px) skew(-20deg); } .box4:after{ content: ''; width: 50px; height: 50px; top:0; left:0; position:absolute; z-index:-1; display: inline-block; -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(12px,25px) skew(20deg); -moz-transform: rotate(2deg) translate(12px,25px) skew(20deg); -o-transform: rotate(2deg) translate(12px,25px) skew(20deg); transform: rotate(2deg) translate(12px,25px) skew(20deg); } /*盒子右下角阴影效果*/ .box4 .shBr{ width: 100px; height: 100px; bottom:0; right:0; position:absolute; z-index: -1; -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(0deg) translate(-20px,-15px) skew(20deg); -moz-transform: rotate(0deg) translate(-20px,-15px) skew(20deg); -o-transform: rotate(0deg) translate(-20px,-15px) skew(20deg); transform: rotate(0deg) translate(-20px,-15px) skew(20deg); } /*盒子左下角阴影效果*/ .box4 .shBl{ width: 100px; height: 100px; bottom:0; left:0; position:absolute; z-index: -1; -webkit-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2); box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(0deg) translate(20px,-15px) skew(-20deg); -moz-transform: rotate(0deg) translate(20px,-15px) skew(-20deg); -o-transform: rotate(0deg) translate(20px,-15px) skew(-20deg); transform: rotate(0deg) translate(20px,-15px) skew(-20deg); } /*==========Box5==========*/ .box5{ 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: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff); background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff); border-top: 1px solid #ccc; border-right: 1px solid #ccc; -webkit-border-radius: 0 0 60px 60px / 0 0 60px 60px; -moz-border-radius: 0 0 60px 60px / 0 0 60px 60px; border-radius: 0 0 60px 60px / 0 0 60px 60px; -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); } /*右折效果*/ .box5:before{ content:''; width: 25px; height: 20px; background: white; position: absolute; bottom:0; right:0; background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff)); background: -webkit-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee); background: -moz-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee); background: -o-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee); -webkit-border-radius: 0 0 30px 0; -moz-border-radius: 0 0 30px 0; border-radius: 0 0 30px 0; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); 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); } /*右折的阴影*/ .box5:after{ content: ''; z-index: -10; width: 100px; height: 100px; position:absolute; bottom:0; right:0; background: rgba(0, 0, 0, 0.2); display: inline-block; -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2); 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); } /*左下角折角*/ .box5 .shBlFlod{ z-index: -10; width: 50px; height: 50px; position:absolute; bottom:0; left:0; -webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: -20px 20px 18px rgba(0, 0, 0, 0.2); box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(0deg) translate(40px,-20px) skew(-20deg); -moz-transform: rotate(0deg) translate(40px,-20px) skew(-20deg); -o-transform: rotate(0deg) translate(40px,-20px) skew(-20deg); transform: rotate(0deg) translate(40px,-20px) skew(-20deg); } /*左下角阴影*/ .box5 .shBl{ content:''; width: 25px; height: 20px; background: white; position: absolute; bottom:0; left:0; background: #fff; background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff)); background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee); background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee); background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee); -webkit-border-radius:0 0 30px 0; -moz-border-radius:0 0 30px 0; border-border-radius:0 0 30px 0; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px); -moz-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px); -o-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px); transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px); } /*=========Box6========*/ .box6{ padding: 0 0 1px 0; background:#fff; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3); background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3); background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3); border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; -webkit-border-radius: 60px 60px 60px 0 / 5px 5px 60px 0; border-radius: 60px 60px 60px 0 / 5px 5px 60px 0; border-radius: 60px 60px 60px 0 / 5px 5px 60px 0; -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ; -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ; } .box6:before{ content:''; width: 25px; height: 20px; position: absolute; bottom:0; right:0; -webkit-border-radius: 0 0 30px 0; -moz-border-radius: 0 0 30px 0; border-radius: 0 0 30px 0; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); 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); } .box6:after{ content: ''; z-index: -10; width: 100px; height: 100px; position:absolute; bottom:0; right:0; background: rgba(0, 0, 0, 0.2); display: inline-block; -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); 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); } .box6 .cornerLf{ width: 100px; height: 100px; top:0; left:0; position:absolute; z-index:-6; display: inline-block; -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg); -moz-transform: rotate(2deg) translate(20px,20px) skew(20deg); -o-transform: rotate(2deg) translate(20px,20px) skew(20deg); transform: rotate(2deg) translate(20px,20px) skew(20deg); } .box6 .cornerRt{ content: ''; width: 50px; height: 50px; top:0; right:0; position:absolute; display: inline-block; z-index:-6; -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 10px -10px 18px rgba(0, 0, 0, 0.2); box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -moz-transform: rotate(2deg) translate(-14px,15px) skew(-20deg); -o-transform: rotate(2deg) translate(-14px,15px) skew(-20deg); transform: rotate(2deg) translate(-14px,15px) skew(-20deg); } /*==========Box7=========*/ .box7{ padding: 0 0 1px 0; background: #fff; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3); background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3); background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3); border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); } .box7:before{ content: ''; position:absolute; width: 130px; height: 30px; border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg); -moz-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg); -o-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg); transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg); } .box7:after{ content: ''; position:absolute; right:0; bottom:0; width: 130px; height: 30px; background: rgba(0, 0, 0, 0.1); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg); -moz-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg); -o-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg); transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg) } /*==========Box8=========*/ .box8{ border: 2px solid #ccc; background: rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1); } .box8:before{ content: ''; width: 110%; left: 0; height: 110%; z-index:-1; position:absolute; border: 1px solid #ccc; background: #f3f3f3; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3)); background: -webkit-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff); background: -o-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff); background: -moz-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.1); box-shadow: 0px 0px 12px rgba(0,0,0,0.1); -webkit-transform: translate(-5%,-5%); -moz-transform: translate(-5%, -5%); -o-transform: translate(-5%, -5%); transform: translate(-5%, -5%); } .box8:after{ content: ''; width: 100%; left: 0; height: 79%; z-index:-2; background: none; position:absolute; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2); -moz-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2); box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } /*=========Box9=======*/ .box9{ border: 1px solid rgba(0,0,0,0.1); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius:20px; background: white; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3); box-shadow:0px 0px 5px rgba(0,0,0,0.3); } /*底部的透明框效果*/ .box9:before{ content: ''; width: 110%; left: 0; height: 111%; z-index:-1; position:absolute; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius:20px; border: 1px solid rgba(0,0,0, 0.1); background: rgba(0, 0, 0, 0.0); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px rgba(0,0,0,0.2); -webkit-transform: translate(-5%,-5%); -moz-transform: translate(-5%, -5%); -o-transform: translate(-5%, -5%); transform: translate(-5%, -5%); } /*这是框的顶部部分的粘带效果*/ .box9:after{ content: ''; position:absolute; top:-25px; left: 30%; width: 130px; height: 40px; background: rgba(0, 0, 0, 0.1); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2); box-shadow: 0px 0px 12px rgba(0,0,0,0.2); } /*=========Box10=====*/ .box10{ padding: 0 0 1px 0; background: #fff; background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); background: -webkit-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3); background: -o-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3); background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3); border: 1px solid #ccc; -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1); -moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1); box-shadow: 1px 1px 4px rgba(0,0,0, 0.1); -moz-border-radius: 0 0 60px 0 / 0 0 5px 0; -webkit-border-radius: 0 0 60px 0 / 0 0 5px 0; border-radius: 0 0 60px 0 / 0 0 5px 0; } .box10:before{ content: ''; width: 98%; z-index:-1; height: 100%; padding: 0 0 1px 0; position: absolute; bottom:0; right:0; background: #fff; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff)); background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9); background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9); background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9); border: 1px solid #ccc; -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1); -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.1); box-shadow: 1px 1px 8px rgba(0,0,0,0.1); -moz-border-radius: 0 0 60px 0 / 0 0 5px 0; -webkit-border-radius: 0 0 60px 0 / 0 0 5px 0; border-radius: 0 0 60px 0 / 0 0 5px 0; -webkit-transform: skew(2deg,2deg) translate(3px,8px); -moz-transform: skew(2deg,2deg) translate(3px,8px); -o-transform: skew(2deg,2deg) translate(3px,8px); transform: skew(2deg,2deg) translate(3px,8px); } .box10:after{ content: ''; width: 98%; z-index:-1; height: 98%; padding: 0 0 1px 0; position: absolute; bottom:0; right:0; background: #fff; background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff)); background: -webkit-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6); background: -o-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6); background: -moz-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6); border: 1px solid #ccc; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1); -moz-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1); box-shadow: 0px 0px 8px rgba(0,0,0, 0.1); -webkit-transform: skew(2deg,2deg) translate(-1px,2px); -moz-transform: skew(2deg,2deg) translate(-1px,2px) ; -o-transform: skew(2deg,2deg) translate(-1px,2px) ; transform: skew(2deg,2deg) translate(-1px,2px) ; } /*==========Box11========*/ .box11{ 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: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff); background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff); border-top: 1px solid white; border-right: 1px solid #ccc; -webkit-border-radius: 0 0 60px 0; -moz-border-radius: 0 0 60px 0; border-radius: 0 0 60px 0; -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: -1px 2px 2px rgba(0,0,0,0.2); box-shadow: -1px 2px 2px rgba(0,0,0,0.2); } .box11:before{ content:''; width: 25px; height: 20px; background: white; position: absolute; bottom:0; right:0; background:#fff; background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff)); background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee); background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee); background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee); -webkit-border-radius: 0 0 30px 0; -moz-border-radius: 0 0 30px 0; border-radius: 0 0 30px 0; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: -2px -2px 5px rgba(0,0,0,0.3); 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); } .box11: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; -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 20px 20px 17px rgba(0,0,0,0.2); box-shadow: 20px 20px 17px rgba(0,0,0,0.2); -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); -moz-transform: rotate(0deg) translate(-40px,-17px) skew(20deg); -o-transform: rotate(0deg) translate(-40px,-17px) skew(20deg); transform: rotate(0deg) translate(-40px,-17px) skew(20deg); } .box11 .ribbon{ position:absolute; top:-25px; left: 30%; width: 130px; height: 40px; background:#ccc; background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); } /*========Box 12========*/ .box12{ 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: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff); background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff); border-top: 1px solid #ccc; border-right: 1px solid #ccc; -webkit-border-radius: 0 0 60px 60px; -moz-border-radius: 0 0 60px 60px; border-radius: 0 0 60px 60px; -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); } .box12:before{ content:''; width: 25px; height: 20px; background: white; position: absolute; bottom:0; right:0; background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff)); background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee); background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee); background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee); -webkit-border-radius: 0 0 30px 0; -moz-border-radius: 0 0 30px 0; border-radius: 0 0 30px 0; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); 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); } .box12:after{ content: ''; z-index: -10; width: 100px; height: 100px; position:absolute; bottom:0; right:0; background: rgba(0, 0, 0, 0.2); display: inline-block; -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 20px 20px 17px rgba(0, 0, 0, 0.2); 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(-40px,-17px) skew(20deg); -o-transform: rotate(0deg) translate(-40px,-17px) skew(20deg); transform: rotate(0deg) translate(-45px,-20px) skew(20deg); } .box12 .shBlFlod{ z-index: -10; width: 50px; height: 50px; position:absolute; bottom:0; left:0; -webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: -20px 20px 17px rgba(0, 0, 0, 0.2); box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(0deg) translate(40px,-20px) skew(-20deg); -moz-transform: rotate(0deg) translate(40px,-17px) skew(-20deg); -o-transform: rotate(0deg) translate(40px,-17px) skew(-20deg); transform: rotate(0deg) translate(40px,-20px) skew(-20deg); } .box12 .shBl{ width: 25px; height: 20px; z-index:20; background: white; position: absolute; bottom:0; left:0; background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff)); background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee); background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee); background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee); -webkit-border-radius: 0 0 30px 0; -moz-border-radius: 0 0 30px 0; border-radius: 0 0 30px 0; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px); -moz-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px); -o-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px); transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px); } .box12 .ribbon{ content: ''; position:absolute; top:-25px; left: 30%; width: 130px; height: 40px; background: #ccc; background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); } /*=======Box 13=====*/ .box13{ padding: 0 0 1px 0; background:#fff; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); background: -webkit-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3); background: -o-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3); background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3); border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; -webkit-border-radius: 60px 60px 60px 0 / 5px 5px 60px 0; -moz-border-radius: 60px 60px 60px 0 / 5px 5px 60px 0; border-radius: 60px 60px 60px 0 / 5px 5px 60px 0; -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ; -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ; } .box13:before{ content:''; width: 25px; height: 20px; position: absolute; bottom:0; right:0; -webkit-border-radius: 0 0 30px 0; -moz-border-radius: 0 0 30px 0; border-radius: 0 0 30px 0; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); 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); } .box13:after{ content: ''; z-index: -10; width: 100px; height: 100px; position:absolute; bottom:0; right:0; background: rgba(0, 0, 0, 0.2); display: inline-block; -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2); 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); } .box13 .cornerLf{ width: 100px; height: 100px; top:0; left:0; position:absolute; z-index:-6; display: inline-block; -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg); -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg); -o-transform: rotate(2deg) translate(20px,25px) skew(20deg); transform: rotate(2deg) translate(20px,25px) skew(20deg); } .box13 .cornerRt{ content: ''; width: 50px; height: 50px; top:0; right:0; position:absolute; display: inline-block; z-index:-6; -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); transform: rotate(2deg) translate(-14px,20px) skew(-20deg); } .box13 .ribbon:before{ content: ''; position:absolute; top:0; left: 0; width: 130px; height: 40px; background:rgba(0,0,0,0.2); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px); -moz-transform: rotate(90deg) skew(0,0) translate(100px,65px); -o-transform: rotate(90deg) skew(0,0) translate(100px,65px); transform: rotate(90deg) skew(0,0) translate(100px,65px); } .box13 .ribbon:after{ content: ''; position:absolute; top:0; right: 0; width: 130px; height: 40px; background:rgba(0, 0, 0, 0.1); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px); -moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px); -o-transform: rotate(90deg) skew(0,0) translate(100px,-65px); transform: rotate(90deg) skew(0,0) translate(100px,-65px); } /*==========Box14=========*/ .box14{ padding: 5px 0 ; background:#fff; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); background: -wbkit-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3); background: -o-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3); background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3); border: 1px solid #ccc; -webkit-border-radius: 60px 5px; -moz-border-radius: 60px/5px; border-radius: 60px/5px; -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset; box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset; } .box14:before{ content: ''; width: 50px; height: 50px; top:0; right:0; position:absolute; display: inline-block; z-index:-1; -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); transform: rotate(2deg) translate(-14px,20px) skew(-20deg); } .box14:after{ content: ''; width: 100px; height: 100px; top:0; left:0; position:absolute; z-index:-1; display: inline-block; -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg); -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg); -o-transform: rotate(2deg) translate(20px,25px) skew(20deg); transform: rotate(2deg) translate(20px,25px) skew(20deg); } .box14 .ribbon{ position:absolute; top:0; right: 0; width: 130px; height: 40px; background: rgba(0, 0, 0, 0.1); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2); box-shadow: 0px 0px 12px rgba(0,0,0,0.2); -webkit-transform: rotate(6deg) skew(0,0) translate(-60%,-5px); -moz-transform: rotate(6deg) skew(0,0) translate(-60%,-5px); -o-transform: rotate(6deg) skew(0,0) translate(-60%,-5px); transform: rotate(6deg) skew(0,0) translate(-60%,-5px); } /*=========BOX15======*/ .box15{ padding: 0 0 1px 0; background:#fff; background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); background: -webkit-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3); background: -o-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3); background: -moz-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3); border: 1px solid #ccc; -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1); -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.1); box-shadow: 1px 1px 4px rgba(0,0,0,0.1); -webkit-border-radius: 0 0 60px 0 / 0 0 5px 0; -moz-border-radius: 0 0 60px 0 / 0 0 5px 0; border-radius: 0 0 60px 0 / 0 0 5px 0; } .box15:before{ content: ''; width: 98%; z-index:-1; height: 100%; padding: 0 0 1px 0; position: absolute; bottom:0; right:0; background: #fff; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff)); background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9); background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9); background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9); border: 1px solid #ccc; -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1); -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.1); box-shadow: 1px 1px 8px rgba(0,0,0,0.1); -webkit-border-radius: 0 0 60px 0 / 0 0 5px 0; -moz-border-radius: 0 0 60px 0 / 0 0 5px 0; border-radius: 0 0 60px 0 / 0 0 5px 0; -webkit-transform: skew(2deg,2deg) translate(3px,8px); -moz-transform: skew(2deg,2deg) translate(3px,8px); -o-transform: skew(2deg,2deg) translate(3px,8px); transform: skew(2deg,2deg) translate(3px,8px); } .box15:after{ content: ''; width: 98%; z-index:-1; height: 98%; padding: 0 0 1px 0; position: absolute; bottom:0; right:0; background: #f3f3f3; background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff)); background: -webkit-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6); background: -o-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6); background: -moz-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6); border: 1px solid #ccc; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.1); box-shadow: 0px 0px 8px rgba(0,0,0,0.1); -webkit-transform: skew(2deg,2deg) translate(-1px,2px); -moz-transform: skew(2deg,2deg) translate(-1px,2px); -o-transform: skew(2deg,2deg) translate(-1px,2px); transform: skew(2deg,2deg) translate(-1px,2px); } .box15 .ribbon{ position:absolute; top:0; left: 0; width: 130px; height: 40px; background:rgba(0, 0, 0, 0.1); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2); box-shadow: 0px 0px 12px rgba(0,0,0,0.2); -webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px); -moz-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px); -o-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px); transform: rotate(-30deg) skew(0,0) translate(-30px,-20px); }
html:
<html> <head> <link href="a.css" media="screen" rel="stylesheet" type="text/css" /> </head> <body> <div class="demo"> <div class="box box1"><p>Box1</p></div> <div class="box box2"><p>Box2</p></div> <div class="box box3"><p>Box3</p></div> <div class="box box4"><p>Box4</p><div class="shBl"></div><div class="shBr"></div></div> <div class="box box5"><p>Box5</p><div class="shBl"></div><div class="shBlFlod"></div></div> <div class="box box6"><p>Box6</p><div class="cornerLf"></div><div class="cornerRt"></div></div> <div class="box box7"><p>Box7</p></div> <div class="box box8"><p>Box8</p></div> <div class="box box9"><p>Box9</p></div> <div class="box box10"><p>Box10</p></div> <div class="box box11"><p>Box11</p><div class="ribbon"></div></div> <div class="box box12"><p>Box12</p><div class="shBl"></div><div class="shBlFlod"></div><div class="ribbon"></div></div> <div class="box box13"><p>Box13</p><div class="cornerLf"></div><div class="cornerRt"></div><div class="ribbon"></div></div> <div class="box box14"><p>Box14</p><div class="ribbon"></div></div> <div class="box box15"><p>Box15</p><div class="ribbon"></div></div> </div> </body> </html>
发表评论
-
小程序textarea完美填坑
2020-07-07 16:09 529相信做微信小程序的码友们都被textarea这个原生组件坑过 ... -
微信小程序页面跳转 的几种方式
2019-09-22 16:04 800最近在做微信小程序, ... -
vue import 传入变量
2019-08-01 13:59 992在做动态添加component的时候,传入变量就会报错,出现以 ... -
在idea里使用vue,设置tab缩进为4
2019-01-21 15:32 2309本人通过vue-cli搭建vue项目后,编写代码时发现tab缩 ... -
vue组件大集合 component
2017-09-07 10:00 576vue组件分为全局组件、局部组件和父子组件,其中局部组件只 ... -
初探和实现websocket心跳重连
2017-06-28 15:20 1779心跳重连缘由 在使用websocket过程中,可能会出现网络 ... -
js Swiper移动设备触控滑块的框架
2016-08-29 16:20 663官方:http://www.swiper.com.cn/ -
CSS3控制文字只显示一行超出部分显示省略号
2016-08-08 16:43 1113在编写网页的时候,我 ... -
node js搭建和实例
2016-06-30 20:13 954我的电脑是mac电脑,所 ... -
jquery.bootstrap.teninedialog.v3.js使用说明
2015-12-27 12:37 834http://www.xnwai.com/teninedial ... -
好用的前端框架(更新中)
2015-12-19 08:44 1310Bootstrap https://github.com/tw ... -
Data URI 和 MHTML
2013-07-06 14:07 1114Data URI Data URI是由RFC 2397定义的 ... -
Web 前端开发者必知的9 个 CSS3 属性
2012-09-25 17:08 1139CSS可以改进网站的设计 ... -
css 设置元素背景为透明
2012-08-23 12:34 1392要设置某一元素的背景为透明,在 chrome 、firefox ... -
meta 之 viewport(移动网页的全屏)
2012-08-01 09:55 2027整理硬盘中几个月来整的小东西,移动网页开发涉及到 viewpo ... -
Cookie, iframe 与 P3P 的那点事儿
2011-08-03 14:13 1539关于Cookie, iframe 与 P3P,自己不是很清楚, ...
相关推荐
【标题】"DIV+CSS纸张效果博客模板"是一个基于HTML和CSS技术设计的博客模板,它通过巧妙的布局和样式模拟出纸张的视觉效果,为读者提供一种独特的阅读体验。这种效果通常包括背景纹理、边角处理、阴影以及排版等方面...
在这个实例中,我们将主要关注CSS3的盒模型、阴影效果、边框半径以及文本阴影等特性。 首先,让我们理解贴纸标签特效的基本概念。这种效果通常包括一个带有立体感的标签,边缘可能有圆角,同时在标签的底部或背面有...
在“12种炫酷CSS3图片切换过渡效果”这个主题中,我们将深入探讨这些效果的实现方法和应用场景。 1. **滑动切换**:这种效果通常用于轮播图,图片沿水平或垂直方向平滑滑动,提供了一种流畅的视觉过渡。通过`...
在IT领域,CSS3是一种强大的样式表语言,用于定义网页的布局、颜色、字体等视觉效果。本主题聚焦于“css3-弹出窗口弹出效果”,这涉及到网页交互设计中的一个重要方面,即如何通过CSS3实现吸引用户的动态提示或信息...
纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧...效果28个纯css3 加载loading动画特效轻量级CSS3立体式3D旋转动画效果简单易用的纯CSS3图片墙效果css3高度灵活的模拟扑克牌切换图片效果又一...
"7种CSS3鼠标hover图片效果.zip"是一个资源包,它包含了七种不同的CSS3技术实现的鼠标hover时图片变换效果。这些效果可以通过引入名为“magic.css”的样式表来实现,让网站的用户体验更加生动有趣。 首先,让我们...
在这款名为“css3线条波浪动画效果”的项目中,开发者利用CSS3的动画(animation)特性,结合PNG图像,创建了一个生动且吸引人的波浪线条动画效果。以下是对这个项目的详细解析: 首先,CSS3的动画功能允许我们为...
css3写的一个小效果,css3写的一个小效果,css3写的一个小效果,css3写的一个小效果,
js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+...
Mimic.css是一个专为前端开发者设计的CSS3动画效果库,它集合了18种独特的、引人注目的动画效果,旨在提升网页的交互性和视觉吸引力。与知名的animate.css类似,Mimic.css以简洁易用的方式为网页增添动态元素,为...
在本文中,我们将深入探讨如何使用CSS3的`transform`属性来实现14种不同的侧边栏导航隐藏和显示的动画效果。这些效果对于优化移动设备和其他小屏幕设备的用户体验至关重要,因为它们允许用户轻松地访问和隐藏导航...
标题中的“CSS3简洁版左右翻页电子书效果”指的是使用CSS3技术实现的一种模拟真实书籍翻页动画的网页设计效果。CSS3是层叠样式表(Cascading Style Sheets)的第三版,它引入了许多新的特性和功能,极大地增强了网页...
纯CSS3实现的各种阴影效果,无需图片和js代码即可实现图片、按钮等元素的阴影效果,完全通过样式控制阴影大小、方向和深度,经测试效果相当不错非常酷。
在“纯CSS3动画按钮效果 5种漂亮样式”这个主题中,我们将讨论如何利用这些特性来设计吸引眼球且用户体验良好的按钮。 首先,CSS3中的关键帧动画(@keyframes)是实现按钮动画的核心。通过定义动画的不同阶段,我们...
【CSS3库】是网页设计领域的一个重要工具,它提供了丰富的样式和动画功能,使得开发者可以创建出富有表现力和动态效果的网页。在本案例中,“模拟iphone面板折叠的css3折叠效果”是一个利用CSS3特性实现的交互式插件...
在这款名为“CSS3制作带阴影贴纸标签特效”的资源中,开发者利用CSS3的特性创建了一个独特的鼠标悬停时带有阴影效果的标签文字特效。这种特效能够为网站增加动态感和交互性,吸引用户的注意力,提升用户体验。 首先...
【标题】:“13种CSS3网页加载进度条效果” 在网页设计中,加载进度条是一种常见的用户体验元素,它能够向用户展示数据加载的进度,缓解用户等待时的焦虑感。CSS3作为现代Web设计的强大工具,提供了丰富的样式和...
在IT行业中,CSS3是一种强大的样式表语言,用于描述HTML或XML(包括SVG、MathML等各种XML方言)文档的呈现。随着技术的发展,CSS3引入了许多新的特性和功能,其中包括艺术文字样式效果。本篇文章将深入探讨如何使用...
css3 html5 4款纸张翻页切换效果实例,一种是四种翻页动画效果,单击图片可看到类似的翻页动画特效,测试时请抛弃IE,支持Chrome、火狐、360极速等多种浏览器,如示例图所示的为其中一种翻页效果的演示。
总的来说,“CSS3电子图片信封打开3D特效”是网页设计中一种创新且实用的技术,它结合了jQuery的便利性和CSS3的强大功能,为用户带来了视觉上的惊喜和交互上的乐趣。掌握这项技术,不仅能提升网页的吸引力,也能彰显...