css偽類before after 實現立體效果

div {    width:200px;    height:200px;    border:1px solid #ccc;    position: relative;    background-color:#fff;    float: left;    text-align: center;    margin: 30px;}.div1::after {    z-index: -15;    position: absolute;    content: "";    bottom: 14px;    right: 7px;    width: 36%;    top: 59%;    max-width: 300px;    background: #777;    box-shadow: 0 15px 10px #A5A5A5;    -webkit-transform: rotate(3deg);}.div1::before {    z-index: -15;    position: absolute;    content: "";    bottom: 14px;    left: 6px;    width: 36%;    top: 59%;    max-width: 300px;    background: #777;    box-shadow: 0 15px 10px #A5A5A5;    -webkit-transform: rotate(-3deg);}.div2 {    border-bottom-right-radius: 50px;    box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);}.div2::after {    content: '';    width: 22px;    height: 22px;    position: absolute;    bottom: 0px;    right: 0px;    border-radius: 0 0 16px 0;    box-shadow: -2px -2px 5px rgba(65, 65, 65, 0.38);    -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-10px,-10px);}.div3 {    border-radius: 60px / 5px;}.div3::after {    z-index: -15;    position: absolute;    content: "";    bottom: 2px;    left: 4%;    width: 91%;    height: 10px;    max-width: 300px;    background: #777;    box-shadow: 0px 4px 11px 1px #A5A5A5;    border-radius: 50%;}.div3::before {    z-index: -15;    position: absolute;    content: "";    left: 4%;    width: 91%;    height: 10px;    top: 4px;    max-width: 300px;    background: #777;    box-shadow: 0px -4px 11px 1px #A5A5A5;    border-radius: 50%;}

<div class="div1">123</div>    <div class="div2">123</div>    <div class="div3">123</div>

http://jsfiddle.net/N93a3/

總結：

如果使用before或者after必須為其賦值一個content屬性，為空白，才能顯示出效果。使用偽類的div一般設定成position：relative；偽類元素一般設定成position：absolute。實現陰影製作效果一般是利用偽類元素的box-shaw屬性，且一般設定在div後面，被其擋住。div的border-radius可以設定成xxpx ／ xxpx 可以得到意想不到的效果。

