还有人不会写阴影吗

下面就带大家来分享一些实实在在的干货。

box-shadow的作用

box-shadow的作用是给元素添加阴影，说简单点就是要给元素阴影特效就用box-shadow就行。

box-shadow有默认值。默认值为none; 不可以继承

语法

box-shadow: *h-shadow v-shadow blur spread color* inset;
复制代码

下面来一一为大家解释他的每个参数的具体意思。

h-shadow 水平阴影的位置

什么意思呢，Json来为你一一道明。 box-shadow: 10px 0px 0px #888888;

当然水平阴影也能为负值，来看看水平阴影-10的效果

这时候就去左面了。

v-shadow 垂直阴影。

垂直阴影，是在哪个方向，哪个维度垂直的呢。下面来带大家一一详解。 box-shadow: 0px 10px 0px #888888;

果不其然，想下是正方向。10px向下是正方向。为正值。

反之v-shadow为负值，阴影的方向就向上。 贴图跟上

box-shadow: 10px 10px 0px #888888; 这样就是右下方向的阴影，方位记得别搞错了。

blur 模糊距离

既然x轴，y轴都有控制的呢。那我们是不是要控制他的模糊程度呢。 是的，我是设计者，我也会这么设计的。那就来引入blur模糊距离 那咱们就用对比的方式学习，没有对比就没有伤害。 来个没有模糊距离的 box-shadow: 10px 10px 0px #888888;

有模糊距离的，模糊距离咱们先给10,是想给多少就给多少啦。看心情，美滋滋。

看到没效果大相径庭，是不是你想要的阴影。搞定。 还没学完了，它的强大不限此

spread 可选。阴影的大小

直接上案例啦 没给spread的时候

box-shadow: 10px 10px 10px 10px #888888;为10的时候，是不是变大了，-10肯定变小啊。看图

color 颜色

box-shadow: 10px 10px 10px 0px red;给个火爆的红色

inset

可选。从外层的阴影（开始时）改变阴影内侧阴影 box-shadow: 10px 10px 10px 0px red inset;

兼容

-weikit-box-shadow Firefox浏览器则需要写成-moz-box-shadow Opera浏览器 -o-box-shadowIE > 9则是-ms-box-shadow