展示

代碼

CSS代碼：

.curved_box {

display: inline-block;

*display: inline;

width: 200px;

height: 248px;

margin: 20px;

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: 70%;

height: 55%;

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;

}

HTML代碼：

總結

以上是生活随笔為你收集整理的css折线效果,CSS3 box-shadow实现纸张的曲线投影效果 张鑫旭-鑫空间-鑫生活的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。