盒子阴影 如何实现。

盒子阴影是什么。
咱们先看看原图：

咱看一下加上阴影的图：

看到效果了吗？
接下来 我教大家如何实现：

首先在HTML里面插入一张图片：

<img src="../img/宝马.jpg" alt="">

然后在CSS里面写样式：
代码：

box-shadow: 0px 0px 5px 7px #ccc;

来解释一下这个代码：

box-shadow: 这是盒子阴影的意思；

第一个0px；(水平方向移动=X轴)；

第二个0px；(水平方向移动=Y轴)；

第三个5px；(模糊度 像素越大 越模糊)；

第四个7px；(模糊延伸度)；

第一个 0px；就是X轴 水平方向移动，测试第一个0px；

（负值向左移动，正直向右移动）
例图： 代码:

box-shadow: 20px 0px 5px 7px #ccc;

第二个 0px；就是Y轴 垂直方向移动，测试第二个0px；

（负值向上移动，正直向下移动）
例图： 代码:

box-shadow: 0px 20px 5px 7px #ccc;

第三个 5px；是模糊阴影度，像素越高越模糊，测试第三个5px；

(不可以为负值)

例图： 代码:

box-shadow: 0px 0px 50px 7px #ccc;

第四个 7px；是模糊范围，像素越大阴影越大，测试第四个7px；

例图： 代码:

box-shadow: 0px 0px 5px 50px #ccc;

(不可以为负值)

第五个 #ccc； 是阴影颜色,咱们换个色红看看。

代码：

box-shadow: 0px 0px 5px 7px red;