盒子阴影是什么。
咱们先看看原图:
咱看一下加上阴影的图:
看到效果了吗?
接下来 我教大家如何实现:
首先在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;