• 微信
当前位置:首页 > 学无止境 > Web前端

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

作者:杨青青 时间:2013-06-25 阅读数:人阅读

效果展示:

阴影右下脚折边效果

代码片段:

 <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>

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:dacesmiling@qq.com

标签:效果阴影
微信

杨青青

Hi~如果您正好看到这里,可以扫一扫微信二维码加我为好友,我是一个喜欢交朋友的人,我知道您也是哦~

微信
阿里云