html怎么做三边阴影,css3制作翘边阴影

css3制作翘边阴影

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

html代码如下：

css3制作翘边阴影

• 
• 
• 

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);

}