html5 图片拱形旋转 CSS DIV拱形边框的图片

效果：

测试代码：

.pic {

width: 400px;

height: 200px;

background: url(tiger.png) no-repeat;

}

.shadow {

position: relative;

}

.shadow:before, .shadow:after {

position: absolute;

z-index: -1;

content: "";

bottom: 25px;

left: 10px;

width: 50%;

top: 80%;

-webkit-box-shadow: 0 35px 20px #989898;

-moz-box-shadow: 0 35px

20px #989898;

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

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

-o-transform: rotate(-10deg);

-ms-transform: rotate(-10deg);

transform: rotate(-10deg);

}

.shadow:after {

-webkit-transform:rotate(10deg);

-moz-transform: rotate(10deg);

-o-transform: rotate(10deg);

-ms-transform: rotate(10deg);

transform: rotate(10deg);

right: 10px;

left:auto;

}