android skew立体阴影,利用伪元素制作盒子阴影

Title

body{

background-color: #cccccc;

}

.box h3{

text-align:center;

position:relative;

top:80px;

}

.box {

width:70%;

height:200px;

background:#FFF;

margin:40px auto;

}

/*==================================================

* Effect 1

* ===============================================*/

.effect1{

box-shadow: 0 10px 6px -6px #777;

}

/*==================================================

* Effect 2

* ===============================================*/

.effect2{

position: relative;

}

.effect2:before, .effect2:after

{

z-index: -1;

content: "";

position: absolute;

left: 10px;

bottom: 15px;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

box-shadow: 0 15px 10px #777;

transform: rotate(-3deg);

}

.effect2:after

{

transform: rotate(3deg);

right: 10px;

left: auto;

}

/*==================================================

* Effect 3、4同Effect原理一致

* ===============================================*/

/*==================================================

* Effect 5

* ===============================================*/

.effect5

{

position: relative;

}

.effect5:before, .effect5:after

{

z-index: -1;

position: absolute;

content: "";

bottom: 25px;

left: 10px;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

box-shadow: 0 35px 20px #777;

transform: rotate(-8deg);

}

.effect5:after

{

transform: rotate(8deg);

right: 10px;

left: auto;

}

/*==================================================

* Effect 6

* ===============================================*/

effect6

{

position:relative;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.effect6:before, .effect6:after

{

content:"";

position:absolute;

z-index:-1;

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:50%;

bottom:0;

left:10px;

right:10px;

border-radius:100px / 10px;

}

/*==================================================

* Effect 7

* ===============================================*/

.effect7

{

position:relative;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.effect7:before, .effect7:after

{

content:"";

position:absolute;

z-index:-1;

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:0;

bottom:0;

left:10px;

right:10px;

border-radius:100px / 10px;

}

.effect7:after

{

right:10px;

left:auto;

transform:skew(8deg) rotate(3deg);

}

/*==================================================

* Effect 8

* ===============================================*/

.effect8

{

position:relative;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.effect8:before, .effect8:after

{

content:"";

position:absolute;

z-index:-1;

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:10px;

bottom:10px;

left:0;

right:0;

border-radius:100px / 10px;

}

.effect8:after

{

right:10px;

left:auto;

transform:skew(8deg) rotate(3deg);

}

Effect 2

Effect 2

Effect 5

Effect 6

Effect 7

Effect 8