css两边翘起效果
利用css实现DIV两边翘起效果css如下；
.box1 li{
width: 328px;
height: 129px;
position: relative;
background: #fff;
float: left;
margin: 20px 10px;
border: 2px solid #f5f5f5;
list-style:none;
}
.box1 li:before{
content:"";
position:absolute;
width:90%;
height: 80%;
bottom: 13px;
left:21px;
background: transparent;
z-index: -2;
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 8px 10px rgba(0,0,0,0.8);
-moz-box-shadow: 0 20px 20px rgba(0,0,0,0.8);
transform:skew(-12deg) rotate(-6deg);
-webkit-transform:skew(-12deg) rotate(-6deg);
-moz-transform:skew(-12deg) rotate(-6deg);
-os-transform:skew(-12deg) rotate(-6deg);
-o-transform:skew(-12deg) rotate(-6deg);
}
.box1 li:after{
content:"";
position:absolute;
width:90%;
height: 80%;
bottom: 13px;
right:21px;
z-index: -2;
background: transparent;
box-shadow: 0 8px 10px rgba(0,0,0,0.6);
transform:skew(12deg) rotate(6deg);
-webkit-transform:skew(12deg) rotate(6deg);
-moz-transform:skew(12deg) rotate(6deg);
-os-transform:skew(12deg) rotate(6deg);
-o-transform:skew(12deg) rotate(6deg);
}
调用：
<div class="boxtp"><h1>bbskali.cn</h1></div>
页:
[1]