HTML5 css3 Div卷边阴影代码

2014-08-18 07:45:02 -0400

HTML代码

<style>
.curved_box {
display: inline-block;
*display: inline;
width: 200px;
height: 258px;
margin: 50px;
background-color: #fff;
border: 1px solid #eee;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
position: relative;
*zoom: 1;
}
.curved_box:before {
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg);
    left: 15px;
}
.curved_box:after {
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg);
    right: 15px;
}
.curved_box:before, .curved_box:after {
    width: 75%;
    height:50%;
    content: ' ';
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 10px;
    z-index: -1;
}
</style>
<link></head><body><div class="curved_box"><hr>我的磨网盘.霸气测漏 <hr>我的磨网盘.霸气测漏 <hr>我的磨网盘.霸气测漏 <hr>我的磨网盘.霸气测漏 <hr>我的磨网盘.霸气测漏 <hr>我的磨网盘.霸气测漏</div>

代码演示

我的磨网盘.霸气测漏

我的磨网盘.霸气测漏

我的磨网盘.霸气测漏

我的磨网盘.霸气测漏

我的磨网盘.霸气测漏

我的磨网盘.霸气测漏

«Newer Older»

Back to home

Subscribe | Register | Login | N