CSS3 box-shadow 详解(1)

uedbet手机官网下载-uedbet手机app下载

这段时间确实比较繁忙，所以博客一直都没什么产出:)

前段时间看到一篇《9个你现在可以使用的CSS3属性( 9 CSS3 Properties You Can Use Now)》，描述了当前可以渐进使用的CSS3的新的属性。但实际上由于种种原因，当前能使用的其实远达不到9个这么多。

本文讨论的就是其中之一，box-shadow，而且是从比较细节的角度。既然是详解就必然要写的详尽，于是，写到一半的时候才发觉内容太多，所以就分成了2个章节。这个章节里讨论box-shadow标准的描述，所以你能知道一些非常细节的东西，当然这些东西都没法使用，所以如果你只是想了解怎么使用box-shadow，请跳过这一章，直接阅读我写的《CSS3 box-shadow 详解(2)》，那里我会写记录些常用的或者是有趣的使用方法。

和往常一样，我先是查找了国内已经有人写过的内容避免自己写的和他们的有所冲突。和我之前写 CSS3 Media Query 时的没有多少好文的情况不同，关于box-shadow已经涌现出了很大的一批内容，所以后面的描述中我将援引他们。

正如标题所示，这里讨论的是CSS3的box-shadow，所以并没有打算讨论过时浏览器的模拟。关于模拟的这方面内容可以参看张鑫旭的《CSS实现跨浏览器兼容性的盒阴影效果》和《CSS实现跨浏览器的box-shadow盒阴影效果(2)》，或者是小鱼的《跨浏览器实现投影(box-shadow)那点事》。

下面，确保你的浏览器是非IE，然后就开始正题吧:)

从标准开始

W3C标准里关于box-shadow的定义内容其实并不多，花上一小块时间就能看完。

Name:box-shadow

Value:

none | [ , ]*

Initial:

none

Applies to:

all elements

Inherited:

Percentages:

N/A

Media:

visual

Computed value:

any made absolute; any color computed; otherwise as specified

The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional ‘inset’ keyword. Omitted lengths are 0; omitted colors are a UA-chosen color.

这里没有多少值得说的地方，唯一需要关注的是box-shadow可以使用 1个或多个投影，类型可以是默认的投影，以及可选的阴影内嵌，这点在后面的应用中可以利用。表达式如下：

<shadow> = inset? && [ <length>{2,4} && <color>? ]

表达式非常直观，但不是经常看的人可能不是很习惯。这个属性定义了2-4个长度值，以及两个可选值inset和color。同时定义里也描述了默认值，长度默认为0，颜色默认为UA所选的颜色（通常是浏览器默认值黑色，但浏览器是有差异的）。或许mozilla给出的定义更为直观些：

box-shadow:  none | <shadow> [,<shadow>]*
where <shadow> is defined as:
inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]

mozilla的这个定义应该更加完整，不仅表现出了多阴影的特性，就连值是什么都写的很清楚。

每一个box-shadow属性由一个或一组逗号分隔的<shadow>给出

每个<shadow>被定义为下面这些值的组合：

inset关键字，将外部投影转变为内部阴影。

第1个长度offset-x代表阴影x轴向的偏移，正值向右，负值向左。

第2个长度offset-y代表阴影y轴向的偏移，正值向下，负值向上。

第3个长度blur-radius代表阴影模糊半径，不允许负值。

第4个长度spread-radius代表阴影扩展半径，正值放大，负值缩小。

color代表投影的颜色。