A-A+

css3制作翘边阴影

2015年03月24日 前端 评论 5 条 阅读 3,151 次
守财鹿邀请码
css3制作翘边阴影

css3制作翘边阴影

css3制作翘边阴影利用after和before伪类,设置class属性transform: skew(12deg) rotate(4deg) 弄成左右相反的2个菱形 ;层级低于本身作为阴影

html代码如下:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
<title>css3制作翘边阴影</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
 <ul class="ilist">
 <li><img src="images/chongwu.jpg" width="192" alt=""></li>
 <li><img src="images/chongwu.jpg" width="192" alt=""></li>
 <li><img src="images/chongwu.jpg" width="192" alt=""></li>
 </ul>
</body>
</html>

css代码如下:


.ilist {
width: 690px;
margin: 30px auto;
}
.ilist li {
position: relative;
float: left;
width: 192px;
height: 168px;
background: #fff;
padding: 5px;
margin-left: 20px;
border: 1px solid #eee;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.ilist li:before {
position: absolute;
z-index: -1;
content: '';
width: 91%;
height: 89%;
left: 10px;
bottom: 8px;
background: transparent;
-webkit-box-shadow: 0px 8px 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 8px 10px rgba(0,0,0,0.6);
box-shadow: 0px 8px 10px rgba(0,0,0,0.6);
-webkit-transform: skew(-10deg) rotate(-4deg);
-moz-transform: skew(-10deg) rotate(-4deg);
-ms-transform: skew(-10deg) rotate(-4deg);
-o-transform: skew(-10deg) rotate(-4deg);
transform: skew(-10deg) rotate(-4deg);
}
.ilist li:after {
position: absolute;
z-index: -2;
content: '';
width: 91%;
height: 89%;
right: 10px;
bottom: 8px;
background: transparent;
-webkit-box-shadow: 0px 8px 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 8px 10px rgba(0,0,0,0.6);
box-shadow: 0px 8px 10px rgba(0,0,0,0.6);
-webkit-transform: skew(10deg) rotate(4deg);
-moz-transform: skew(10deg) rotate(4deg);
-ms-transform: skew(10deg) rotate(4deg);
-o-transform: skew(10deg) rotate(4deg);
transform: skew(10deg) rotate(4deg);
}

 

打赏

5 条留言  访客:3 条  博主:2 条

  1. 奥巴马

    Hello, friends, I am very optimistic about your ability, to America mixed with me! 发送

    • web小斌

      no,thanks,i want to rely myself.

      • 奥巴马

        To 斌斌 :good boy !

  2. 习大大

    小伙子 我很看好你的才能 来北京跟我混如何?

    • web小斌

      跟着您老人家我紧张,心里素质不太好,我还是先自己打拼一下

给我留言

Copyright © WEB小工匠 保留所有权利.   渝ICP备15008469号

渝公网安备 50023602000173号

用户登录

分享到: