CSS不必属性可用于为块元素提供投影或内阴影。让我们仔细看看这个CSS属性。
例子
下面是应用CSS的三个不同示例不必属性在一个div．
例1:简单的投影
你可以这样做div一个微妙的灰色阴影。
Box-shadow: 0 0 10px灰色;
例2:内阴影
控件可以渲染内部阴影插图属性值。
不必:插图0 0 10 px;
例3:偏移投影
在这个例子中，通过使用水平偏移5px和垂直偏移5px的方式，盒子阴影被投射到盒子的右下角。
不必:5 px 5 px10 px;
如果你想让阴影出现在盒子的左上角呢?我们可以使用负值作为水平偏移量和垂直偏移量。
在下面的例子中，水平偏移量和垂直偏移量被设置为-5px。
不必:5 px 5 px10 px;
现在您已经看到了一些CSS示例不必在实际操作中，让我们再深入一点。
语法
的一般语法不必财产如下:
不必:(插图)(横向偏移量)(垂直偏移量)(模糊半径)(传播距离)(颜色)；CSS属性值
CSS不必属性有六种可能的属性值:
- 插图
- 横向偏移量
- 垂直偏移量
- 模糊半径
- 传播距离
- 颜色
只需要两个属性值:水平偏移量和垂直偏移量。四个属性值，水平偏移量，垂直偏移量，模糊半径和扩散距离，必须使用一个CSS长度单位(如px, em， %等)。
# 000000)。
属性值的总结
| 属性值 | 需要吗? | 单位 | 如果没有指定，默认值 |
|---|---|---|---|
| 插图 | 没有 | 关键字 | 如果未指定inset，框影将位于HTML元素的外部。 |
| 横向偏移量 | 是的 | 长度 | 没有默认值。 它必须被指定。 |
| 垂直偏移量 | 是的 | 长度 | 没有默认值。它必须被指定。 |
| 模糊半径 | 没有 | 长度 | 0 |
| 传播距离 | 没有 | 长度 | 0 |
| 颜色 | 没有 | 颜色 | 等于应用框阴影的HTML元素的color属性。 |
插图
如果插图如果出现关键字属性值，则框影将被放置在HTML元素中。
不必:插图0 0 5px 5px橄榄;
作为一个比较参考，下面是相同的框影，但没有inset属性:
框影:0,0 5px 5px橄榄;
横向偏移量
水平偏移值控制框阴影的x轴位置。正值将使框影向右移动，而负值将使框影向左移动。在下面的例子中，水平偏移量被设置为20px，或者是垂直偏移量的两倍(设置为10px)，所以阴影的水平宽度是原来的两倍。
不必:20 px10 px;
垂直偏移量
垂直偏移控制框阴影在y轴上的位置。正值将使其向下移动，负值将使其向上移动。在下面的例子中，垂直偏移的长度是-20px，或者是水平偏移长度的两倍(10px)，所以阴影的大小在垂直轴上是两倍大。
另外，由于这个值是负的，阴影的位置会偏移到盒子的顶部。
不必:10 px-20 px；
模糊半径
模糊半径属性值会影响框影的模糊度/锐度。模糊半径是可选的。如果您没有指定它，它将默认为0。此外，它不能有负值，不像水平偏移和垂直偏移。如果模糊半径为0，盒子阴影将是尖锐的，它的颜色将是实心的。随着值的增加，它会变得更加模糊和不透明。
在下面的例子中，模糊半径的值设置为20px，因此模糊度非常明显。
不必:5 px 5 px20 px；
传播距离
扩散距离使盒子阴影在各个方向上变大或变小。如果它是一个正值，盒子阴影将在所有的方面增长。如果它有一个负值，盒子的阴影将收缩在所有的方面。
注意，由于正向扩展距离(10px)，盒子的所有侧面都有10px的投影，因为没有水平偏移和垂直偏移:
Box-shadow: 0 0 10px5 px；
当扩散距离为负时，阴影在所有的方向上收缩。在下面的例子中，阴影比盒子的宽度小，因为它的负扩散距离和没有水平偏移:
Box-shadow: 0 10px 10px5 px；
颜色
正如你可以通过它的名字知道的那样，颜色值设置了盒子阴影的颜色。它可以使用任何CSS颜色单元来指定。指定颜色值是可选的。
默认情况下——换句话说，如果您没有显式地声明框阴影的颜色值——阴影的颜色将等于HTML元素的颜色值不必属性应用于的。例如，如果你有一个div颜色是红色的，盒子阴影的颜色也将是红色的：
颜色:红色;框影:0 0 10px 5px;
如果你想要一个不同的阴影颜色，那么你需要在不必属性值声明。下面你可以看到，即使前景色div仍然是红色的，框影颜色为蓝色的．
颜色:红色;Box-shadow: 0 0 10px 5px蓝色的；
多个框阴影
这就是使用这个CSS属性真正有创意的地方:你可以在一个元素上应用多个框影。语法如下:
不必:[框影属性1]，[框影属性2]，[框影属性]；
换句话说，通过用逗号(，)分隔每个属性值组，可以有多个框影。在下面的例子中，有两个盒子阴影:红色的在盒子的左上方，蓝色的在盒子的右下方。
不必:-5px -5px 30px红色，5px 5px 30px 5px蓝色；
浏览器支持
CSS不必属性具有良好的浏览器支持。使用Internet Explorer作为最小公分母，该属性自IE 9(2011年发布)以来就得到了支持。
CSS Box Shadow示例
通过单击下面的按钮，您可以看到本文中使用的所有框影示例的实时演示。视图演示
