假装很高级的「box-shadow」

语法：box-shadow: offset-x offset-y [blur] [spread] [color] [inset]

属性说明：阴影的x轴（可负），阴影的y轴（可负），阴影模糊程度，阴影大小，阴影颜色，是否设置为内阴影

注意点：不像border属性，可以简写可以拆分属性值，box-shadow不可拆分，因此需要记住各个值的顺序。但对于一个块级元素的四边，可以设置完整的box-shadow值用来分别展示四边阴影效果，如果不理解，请在文中找答案。

---

适配：css3新属性，对部分浏览器版本不兼容

-webkit-box-shadow:  // chrome内核
   -moz-box-shadow:  // ff 浏览器
    -ms-box-shadow:  //IE > 9
     -o-box-shadow:  // 欧朋浏览器
        box-shadow:  // 基础

 

》》参数详解

> offset-x

  第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。

.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }

> offset-y

  第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。

.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }
.right{ box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }

  因为这里指的是偏移量，所以，对于offset-y的值，20px就是距上20px，也就是阴影向下偏移了20px，所以在底部漏出来了。

> blur

  第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。

.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }

> spread

  第四个参数，指定阴影的大小，负数表示比元素小，正数比元素大。0虽然表示和元素一样大本该不显示（被元素完全遮挡），但如果设置了模糊（第三个参数）且不为0，,则会因为模糊效果导致出现阴影。

.left {box-shadow: 0 0 20px 0px rgba(0,0,0,0.5)}
.right {box-shadow: 0 0 20px 20px rgba(0,0,0,0.5);}

> color

  第五个参数，指阴影的颜色。它可以是任意的颜色单元

.left { box-shadow: 0px 0px 20px 10px #67b3dd }
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }

 

》》多重阴影 与 inset内阴影

  box-shadow 属性在一个元素上能接受多个阴影值。添加至 box-shadow 的阴影以逗号分离。

.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */
    20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */
}

> 四边阴影分别设置

  可以利用多重阴影的规则，设置每一边的展示效果，只需要设置四个完整的值，每一个值只展示一边的效果。

.foo {
  box-shadow: -10px 0px 10px red,    /*左边阴影*/ 
               0px -10px 10px #000,  /*上边阴影*/ 
               10px 0px 10px green,   /*右边阴影*/ 
               0px 10px 10px blue;"   /*下边阴影*/
}

 

》》特效应用

  如题，box-shadow用法虽然很简单，但结合transfrom或其他属性，却可以制作出看起来很高级的动画效果，

1. 拉起效果：

.popup {
    transform: scale(1);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s, transform 0.5s;
}
.popup:hover {
    transform: scale(1.3);
    box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s, transform 0.5s;
}

拉起前 鼠标悬浮展示拉起后效果

> 翘起的纸张效果

<div class="effect">
    <h3>Effect</h3>
</div>

.effect
{
  position: relative;
}
.effect:before, .effect:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 45%;
  top: 80%;
  box-shadow: 0 35px 20px #777;
  transform: rotate(-3deg);
}
.effect2:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

效果图：

 关于该案例，更多效果可以 戳这里