运用圆角和阴影box-radius和box-shadow绘制效果,算得上高级应用了吧,直接上代码:
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>曲边、翘边阴影 - Web前端之家</title> <style> html,body,ul,li,div,h3{margin:0;padding:0;} .wrap{ position: relative; width:500px; height:400px; background:#fff; margin:20px auto; } .wrap h3{ position:relative; text-align: center; top:180px; } .effect{ position:relative; box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.3) inset; } .effect:after,.effect:before{ content:""; z-index:-1; position:absolute; top:50%; left:10px; right:10px; bottom:0; border-radius:100px/10px; box-shadow:0 0 20px rgba(0,0,0,0.8); } .box{ width: 980px; height:auto; margin:0 auto; padding:0; } .box li{ position: relative; width:300px; height:220px; line-height: 220px; list-style: none; float:left; margin:20px 6px; border:2px solid #efefef; background:#fff; padding:5px; box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset; } .box li:before{ position:absolute; left:20px; bottom:8px; z-index:-2; content:""; position: absolute; background-color:transparent; width:90%; height:80%; transform:skew(-12deg) rotate(-4deg); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); } .box li:after{ position:absolute; right:20px; bottom:8px; z-index:-2; content:""; position: absolute; background-color:transparent; width:90%; height:80%; transform:skew(12deg) rotate(4deg); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); } .box img{ width:300px; height:220px; } </style> </head> <body> <div class="wrap effect"> <h3>Shadow Effect</h3> </div> <ul class="box"> <li><a href="#"><img src="http://p0.so.qhmsg.com/t018fab262620d51435.jpg" alt=""></a></li> <li><a href="#"><img src="http://p0.so.qhmsg.com/t018fab262620d51435.jpg" alt=""></a></li> <li><a href="#"><img src="http://p0.so.qhmsg.com/t018fab262620d51435.jpg" alt=""></a></li> </ul> </body> </html>
网友评论文明上网理性发言 已有0人参与
发表评论: