阴影介绍

                            阴影控制参数

我们在写一些样式的时候难免会遇到一些使用阴影来增加样式的美感，或者是通过添加伪类等方法在鼠标移入的时候显示阴影来更方便去识别，总之这个虽然简单，但是细节很重要，下面我们就来了解一下吧！

首先我们看到的这个就是右边和下边的阴影

而实现这个阴影的代码就是：box-shadow: 10px 10px 12px #333;

★我们来分析一下这4个参数；第一个参数决定的是右边的阴影，数值越大，阴影距离就越大，方向向右扩散，比如我们把它改成20px就是下面这样的

★第二个参数不出意外也就是控制下面的阴影了，同样的，数值越大，扩散距离越大，方向向下如下：

★第三个参数则是控制阴影的硬度的，数值越大，阴影颜色越模糊，比如我们把这个阴影调大一些，就是这样的

当然我们第四个就是阴影的颜色了；

我们如果把阴影的前两个值改成负数，是不是应该对于的就变成了相反的位置，比如吧

box-shadow: 10px 10px 30px #333;改成box-shadow: -10px -10px 30px #333;

那么阴影就应该是上面和左面了，我们来看下下面的效果：

当然，第三个值可不能为负数，是负数的话会没有阴影的扩散硬度的

如果我们要这个图片全部都有阴影怎么做？我们可以试着加一个参数在里面，比如

box-shadow:10px 8px 8px 20px #333;

多一个参数就会是这样的样式

当然仔细参数值都要慢慢调来达到需要的效果的；