CSS系列之”box-shadow “(阴影)

1 comment Feb.11.2011 , Tagged : box-shadow, css3, 伪类

使用CSS3里的box-shadow属性，我们就可以不使用图片(或额外的标签)来制作阴影效果了(费话，地球人都知道)！！不过单纯给标签定义box-shadow，可能不能完全符合我们的需要，这时伪类就派上用场了(原来这东西还可以这样用)，我们可以使用:befor、:after伪类来处理一些特殊的阴影效果。

.drop-shadow {
   position:relative;  /* 给伪类定位作准备*/
   width:90%;
   height:80px;
   line-height:80px;
   background:#fff;
   border:2px solid #ddd;
   text-align:center;
}
 
.type-1:before,
.type-1:after {
   content:"";  /* 这个是必须的 */
   position:absolute;  /* 绝对定位，调整阴影位置 */
   z-index:-1;  /* 使阴影置于最低层 */
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;  /* 这个看情况设置 */
   /* 加阴影，没什么特别 */
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   /* 旋转阴影，同样没什么特别*/
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}
/* 实现右边的阴影效果，其实还是旋转加定位-_- */
.type-1:after{
   right:10px;
   left:auto; 
   -webkit-transform:rotate(3deg); 
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
}