摘要：水平偏移水平偏移控制了盒子阴影在轴的偏移。同时，因为是负值，所以向上移动。如果是负值，则会在各个方向上收缩。值得注意的是，因为它的扩展距离是正，所以会在各个方向上增加因为没有水平和垂直偏移。它可以通过任何可以表示颜色的方式来表示颜色。
原文：A Close Look at CSS Box Shadow
CSS的box-shadow可以被用来给块级元素一个外阴影或者是内阴影。接下来让我们仔细地看一下这个CSS的特性吧。
举例下面有三个把CSS的box-shadow属性使用在div里的例子。
例１：简单的外阴影下面是是给副标题添加阴影的样式。
box-shadow:0 0 10px gray;例2：内阴影
一个内阴影可以通过使用inset属性值来渲染出来。
box-shadow:inset 0 0 10px;例3：偏移外阴影
这个例子中我们通过水平和垂直方向下和右偏移5px来实现阴影向右下方偏移
box-shadow:5px 5px 10px;
加入你想要阴影向左上方偏移呢？我们可以通过将水平和垂直方向的偏移量设置为-5px，正如下面的例子：
box-shadow:-5px -5px 10px;
既然你已经看到了box-shadow在现实中的使用，接下来让我们更加深入地了解一下。
语法box-shadow的一般语法如下：
box-shadow:[inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color]CSS属性值
CSS的box-shadow可能会有6个属性值：
inset
horizontal offset
vertical offset
blur radius
spread distance
color
只有两个属性是必须的：水平偏移和垂直偏移量。
四个属性值，水平偏移，垂直偏移，模糊半径，扩展距离，必须使用CSS长度单元（比如：px,em,%等）
这个颜色值必须是必须是一个颜色单元，比如十六进制值（如：#000000）。
属性和值总结表| 属性 | 是否必须 | 单位 | 默认值 |
|---|---|---|---|
| inset | 不是 | 关键词 | 没有指定的时候，阴影默认在外面 |
| 水平偏移 | 是 | 长度 | 没有默认值，一定有指定 |
| 垂直偏移 | 是 | 长度 | 没有默认值，一定要指定 |
| 模糊半径 | 不是 | 长度 | 0 |
| 扩展距离 | 不是 | 长度 | 0 |
| 颜色 | 不是 | 颜色 | 和box shadow属性作用的元素的color值一样 |
如果inset关键词存在，盒阴影将会放在HTML元素的内部
box-shadow:inset 0 0 5px 5px olive;
作为对比，这里是一个没有inset属性的box-shadow样式。
box-shadow:0 0 5px 5px olive;水平偏移
水平偏移控制了盒子阴影在x轴的偏移。正值会把盒子的阴影向右移动，负值的话会把它向左移动。
下面的例子中，我们把水平的偏移设置成20px，刚好是水平偏移量的两倍，所以阴影水平宽度刚好是垂直高度的两倍。
box-shadow:20px 10px;垂直偏移
垂直偏移控制了盒阴影在y轴的偏移量。正值会把盒子的阴影向下移动，负值刚好相反会把盒子网上移动。
下面的例子中，垂直的偏移设置成-20px，刚好是水平偏移的两倍。同时，因为是负值，所以向上移动。
box-shadow:10px -20px;模糊半径
这个模糊半径会影响到阴影的模糊和锐利程度。
模糊半径是可选的，如果你不指定它，默认值是0.另外，你不能指定它为负值，这个和水平偏移和垂直偏移不一样。
如果模糊半径是0，盒子阴影会很锐利并且它的颜色是很实的。随着你不断的增大这个值，它会变得越来越模糊和透明。
下面的例子，模糊半径被设置成20px，因此模糊度是相当突出。
box-shadow:5px 5px 20px;扩展距离
这个扩展距离会让盒子的阴影在各个方向上都会变大或变小。如果它有一个正值，盒子阴影会在各个方向上增加大小。如果是负值，则会在各个方向上收缩。
值得注意的是，因为它的扩展距离是正5，所以会在各个方向上增加10px因为没有水平和垂直偏移。
box-shadow:0 0 10px 5px;
当扩展距离是负的时候，阴影就会在各个方向上收缩。下面的例子展示当阴影的宽度比盒子小的时候的情况
box-shadow:0 10px 10px -5px;颜色
通过名字你就可以判断出来，颜色值会设置盒阴影的颜色。它可以通过任何可以表示颜色的方式来表示颜色。是否设置颜色值是可选的。
换句话说，默认情况下当你没有指明颜色值，阴影颜色会等于这个盒子对应的html元素的颜色值。比如有一个div的颜色被设置成红色，这个盒子阴影的颜色也会变成红色：
color:red; box-shadow:0 0 10px 5px;
如果你想要设置阴影的颜色和div的颜色不一样，可以通过下面的方式，你会发现尽管你的文字颜色是红色，盒子阴影颜色依然可以是蓝色。
color:red; box-shadow:0 0 10px 5px blue;多阴影效果
这个就是能够让我们变得有创造力的CSS属性。你能够在一个盒子上设置多个阴影。
语法就像下面这样。
box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];
换句话说，你可以通过在每个属性设置组后面添加逗号(,)来实现多阴影。
下面的例子展示了两个阴影的情况，左上方红色的阴影，右下方蓝色的阴影。
box-shadow: -5px -5px 30px 5px red,
5px 5px 30px 5px blue;
浏览器支持
这个CSS的box-shadow属性有着很好地浏览器支持。使用这个属性在拖后腿的IE浏览器也能在IE9以后得到支持啦。
查看演示
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111180.html
摘要：水平偏移水平偏移控制了盒子阴影在轴的偏移。同时，因为是负值，所以向上移动。如果是负值，则会在各个方向上收缩。值得注意的是，因为它的扩展距离是正，所以会在各个方向上增加因为没有水平和垂直偏移。它可以通过任何可以表示颜色的方式来表示颜色。 原文：A Close Look at CSS Box Shadow CSS的box-shadow可以被用来给块级元素一个外阴影或者是内阴影。接下来让我们...
摘要：系列文章说明原文下面的兼容性表将总结出表单对的支持程度，由于和表单的复杂性，这几个表不能认为是最佳的参考对象。该属性不能生效，或者表现很不一致以至于不可靠。在表单组件上，不支持该属性。按钮属性备注该属性不会在上的浏览器上生效。 系列文章说明 原文 下面的兼容性表将总结出HTML表单对CSS的支持程度，由于CSS和HTML表单的复杂性，这几个表不能认为是最佳的参考对象。尽管如此，它们...
摘要：系列文章说明原文下面的兼容性表将总结出表单对的支持程度，由于和表单的复杂性，这几个表不能认为是最佳的参考对象。该属性不能生效，或者表现很不一致以至于不可靠。在表单组件上，不支持该属性。按钮属性备注该属性不会在上的浏览器上生效。 系列文章说明 原文 下面的兼容性表将总结出HTML表单对CSS的支持程度，由于CSS和HTML表单的复杂性，这几个表不能认为是最佳的参考对象。尽管如此，它们...
摘要：希腊神话中有这样一个故事是讲述宙斯创造出来一个云女神涅斐勒，并且类似大多数的希腊神话一样的，这个故事非常的奇异且限制级。我们能够知道的是涅斐勒是由宙斯以他自己美丽的妻子的形象创造的。希腊神话中有这样一个故事是讲述宙斯创造出来一个云女神涅斐勒，并且类似大多数的希腊神话一样的，这个故事非常的奇异且限制级。下面一个简短克制的版本。我们能够知道的是： 涅斐勒是由宙斯以他自己美丽的妻子的形象创造的。一...
摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...
阅读 2437·2021-11-22 09:34
阅读 3020·2021-10-25 09:43
阅读 1949·2021-10-11 10:59
阅读 3302·2021-09-22 15:13
阅读 2303·2021-09-04 16:40
阅读 405·2019-08-30 15:53
阅读 3170·2019-08-30 11:13
阅读 2575·2019-08-29 17:30
