CSS box-shadow 详解

box-shadow 的值定义为 none | [ inset? && <length>{2,4} && <color>?]#，默认是 none. 后半部分 [ inset? && <length>{2,4} && <color>?]# 的理解是

1. # 指前面的实体可以出现一次也可以多次，当是多次的时候需要用逗号隔开，
2. && 指两边的实体都必须出现但是可以是任意顺序，
3. ? 指前面的实体是可有可无的，当有的时候只能出现一次，
4. {2,4} 指前面的实体至少出现2次至多出现4次。

关于英文单词的学习和记忆，大家可以访问这个网站。

当有多个 shadow 即使用了逗号时，后面声明的将在前面声明的底部画，即我们人眼看到的就是前面声明的把后面声明的一部分给遮盖了。

优先级 ? 高于 &&，详见这。简而言之就是 inset 和 <color> 是可选的，<length> 类型的值可以出现二到四次，inset、<length>{2,4}、<color>可以是任意顺序。

当没有 inset 时，shadow 就是 outset 的即在边框 (border) 的外边，inset、outset 指边框的内外。没有 <color> 值时默认为 currentColor，简单理解就是那个元素的 color (非 background-color) 值，如果那个元素没有设置 color 值那么就取 browser/user agent stylesheet 里的 color 值，如果还没有就从父/祖先元素继承。这里有一点需要注意的是 currentColor 是指那个元素生效的 color 值，对同一元素可能存在多个 color 声明，那么权重高的 (higher specificity) 或者权重相同后来声明的将会生效。

<length> 类型的值出现两次的时候依次指 h-offset、v-offset，当出现三次的时候就再加一个 blur-distance，第四次的时候再加一个 spread-distance，可以参考这 (本文档的用词并不完全与引用的文档一样)。

我们知道在写 CSS 的时候，下面声明的相同属性会覆盖上面声明的，浏览器的 devtool 把 CSS 文件里下面写的 CSS 放在了最上面，见下图。

创建下面的按钮

用到的 HTML 是在 body 元素里添加

<button class="button">热干面</button>

CSS 是

body {
  margin: 0;
  background-color: lightgray;
  color:  white !important; /* here !important is just a distraction */
}

button {
  margin-top: 1em;
  border: 0;
  padding: 1.5em 2em;
  font-size: 2em;
  color: rgba(255, 0, 0, .7); /* red */
  border-radius: .25em;
  background-color: rgba(0, 255, 0, .7); /* green */
  box-shadow: 0 -0.4em 0 currentColor, rgba(0, 0, 255, .7) /* blue */ 0 -0.8em 0;
}

其中 box-shadow 里的 currentColor 取自该元素的 color 值。当去掉 color 声明时，颜色变为黑色而不是 body 元素里的白色，这是因为 browser/user agent stylesheet 里对按钮设置的 color 为黑色。

button 样式里 <length> 单位用的 em 是相对于该元素 font-size 的大小而言的，而 font-size 里的 em 是继承父/祖先元素 font-size 的大小，详细解释见这。对此例子而言，button 里 font-size 的 1em 等于根元素 (html) 的 font-size 大小即默认的16px，所以 button 的 font-size 是32px，padding 转换过来就是 48px 64px，我们可以从 devtool 里的 computed 标签里的剖析看出来，见下图。

为什么给 button 添加 margin-top: 1em; 呢，因为 outset 的 box-shadow 是在 border 的外边画的，不加这条声明的话 shadow 将会被浏览器的菜单栏 (menu bar) 遮住。border: 0; 是为了避开 browser/user agent stylesheet 的影响。