box-shadow 阴影右下脚折边效果

效果展示：

阴影右下脚折边效果

代码片段：

<style type="text/css">

.boxshadow {

width: 300px;

min-height: 300px;

margin: 30px;

display: inline-block;

background: #fff;

border: 1px solid #ccc;

position:relative;

text-align:center;

}

.boxshadow1{

padding: 0 0 1px 0;

background: #f3f3f3;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));

background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);

border-top: 1px solid #ccc;

border-right: 1px solid #ccc;

border-radius: 0 0 60px 0 / 0 0 60px 0;

box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);

}

.boxshadow1:before{

content:'';

width: 25px;

height: 20px;

position: absolute;

bottom:0;

right:0;

border-radius: 0 0 30px 0;

box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);

-webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

-o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);

}

/*这里，我们做出的褶皱阴影*/

.boxshadow1:after{

content: '';

z-index: -1;

width: 100px;

height: 100px;

position:absolute;

bottom:0;

right:0;

background: rgba(0, 0, 0, 0.2);

display: inline-block;

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

-webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

-moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

-o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

transform: rotate(0deg) translate(-45px,-20px) skew(20deg);

}

</style>

html 页面：

<div class="boxshadow boxshadow1">

<p>阴影右下脚折边效果</p>

</div>

本文链接：http://so.lmcjl.com/news/2376/