每天CSS学习之box-shadow

box-shadow是CSS3的属性，目的是给盒子添加一个或多个阴影。怎么感觉有点像光明使者使用该法术照亮敌人的阴暗面？

box-shadow一共有六个属性，请看：

box-shadow: h-shadow  v-shadow  [blur]  [spread]  [color]  [insert];

让我们来用中文翻译一遍：

box-shadow: x-offset  y-offset  [阴影模糊半径]   [阴影扩展长度]   [阴影颜色]   [内置阴影]

上面打了中括号的都是可选的。

一般阴暗面都是在敌人的背后或内心，此文所讲的box-shadow也不例外，它在盒子的背后或者内置。如果不设置 阴影模糊半径(blur)和阴影扩展长度(spread)，那么阴影与盒子是一样的大小。如果不设置某些值将之显现出来，是根本看不到的。

接下来解释一下这些属性：

1、h-shadow(x-offset)：距离盒子左侧的长度值。为0px，则阴影的左侧与盒子的左侧一致，如果为5px，则阴影的左侧距离盒子左侧5px；

2、v-shadow(y-offset)：距离盒子顶部的长度值。为0px，则阴影的顶部与盒子的顶部一致，如果为5px，则阴影的顶部距离盒子顶部5px。如下图：

红色的是边框，黑色的是阴影。因为没有设置blur和spread的值，所以阴影的大小与盒子是一样的，但是阴影在盒子背后。

3、blur(阴影模糊半径)：该值不能为负值，且该值越大，阴影就越模糊，阴影面积就越大。如下图所示：

blur为0时，阴影不会模糊：

blur为5px时：

blur为25px时，阴影变得更模糊，且模糊半径更大：

4、spread(阴影扩展长度)：该值可为正负值。如果为正值，如50px，则表示在阴影的每个边都外延50px个长度。如果为负值，如-50px，则表示在阴影的每个边都内缩50px个长度。

spread为0时：

spread为25px时：

spread为-10px时：

5、color(阴影颜色)：设置阴影的颜色。就如上图，阴影的颜色被设置为black。虽然该值为可选参数，但是建议每次都显示指定。

可以用如下方式指定阴影的颜色：

a.直接写颜色名称，如black；

b.使用rgb(r,g,b)，如rgb(255,0,0)；

c.使用rgba(r,g,b,alpha)，如rgba(255,0,0,0.5)。alpha指透明度，取值0~1之间，值越大，越不透明；

d.使用#FF0000这种方式。

以上讲的都是外阴影，即阴影在盒子外部。接下来讲一讲内阴影。

6、inset(内置阴影)：如果不设置该值，阴影就是外置的(outset)；否则就会将阴影内置到盒子中。

首先看一看阴影模糊半径：

再看一看设置了h-shadow和v-shadow的效果：

是不是感觉和外置阴影不一样？肯定的嘛，内置阴影和外置阴影的效果是相反的。

外置阴影的模糊半径是由四个边向外扩展，而内置阴影的模糊半径是向内扩展。

内置阴影的h-shadow和v-shadow隔离出来的就是内置阴影的面积。看懂了吧！

接下来看一下内置阴影spread的设置：

由此看来，不管是外置阴影，还是内置阴影，针对spread来说，只要为正值，就是扩展阴影面积；只要为负值，就是缩减阴影面积。

以上是添加一个阴影的做法，其实还可以添加多个阴影，每个设置之间用半角逗号“,”隔开。如下图所示：

如果添加了多个阴影，都设置了阴影模糊半径，那么最终的阴影模糊颜色是它们的综合。如：

上面最后一张图片是它们模糊后颜色的综合。

本篇文章的最后，让我们来制作一个太阳，象征着重庆的天气-_-!!!，热火朝天哟！