码迷,mamicode.com
首页 > Web开发 > 详细

css3翘边阴影效果

时间:2015-02-04 18:03:19      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:

   一,直接上图

   技术分享

二,应用技术及原理

     主要应用css3的box-shadow属性和transform属性,利用伪类变形分不同层来重叠阴影。

     

三,代码

     html: 

<div class="box"></div>

     css:

.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;
}

.box:before {
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg);
    left: 15px;
}
.box:after {
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg);
    right: 15px;
}

.box:before, .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;        
}

四,参考

1,http://www.zhangxinxu.com/wordpress/?p=1322  张鑫旭  
2,http://www.imooc.com/learn/240 慕课网

css3翘边阴影效果

标签:

原文地址:http://www.cnblogs.com/akou/p/4272745.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!