CSS box-shadow 详解

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

# 指前面的实体可以出现一次也可以多次，当是多次的时候需要用逗号隔开，
&& 指两边的实体都必须出现但是可以是任意顺序，
? 指前面的实体是可有可无的，当有的时候只能出现一次，
{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 的影响。

CSS box-shadow 详解相关推荐

CSS vw vh详解
CSS vw vh详解简介适配原理简介 vw vh是一种相对单位相对视口的宽度计算结果 vw viewport width 1vw=1/100视口宽度 vh viewport height 1 ...
CSS盒子模型详解(清除无序列表的项目符号)
CSS盒子模型详解(清除无序列表的项目符号) 网页的布局过程准备好相关的网页元素(盒子) 利用CSS设置好盒子的样式以及在网页中的摆放位置往盒子里面装东西盒子模型(box model) 网页中, ...
[转]CSS hack大全详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
Bounding box regression详解
Bounding box regression详解转载 http://blog.csdn.net/u011534057/article/details/51235964 Reference link ...
CSS属性vertical-align详解（CSS之五）
CSS属性vertical-align详解作用对象 vertical-align的意思是在垂直方向进行对齐.它主要对以下属性的元素有效 inline元素.inline-block元素和普通的文本. ...
css background-attachment属性详解
css background-attachment属性详解 background-attachment属性用途 background-attachment属性用于设置背景图片定位的参照方式 backg ...
html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
原标题:HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单今天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象 ...
基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...
CSS超链接样式详解
CSS超链接样式详解 1.超链接伪类 2.深入了解:hover :hover用于div :hover用于img 3.鼠标样式浏览器鼠标样式自定义鼠标样式 1.超链接伪类在CSS中,我们可以使用& ...
css input 内容换行显示,CSS文本换行详解
还记不记得昨天发表的<table表格那点事儿>最后的一个问题不?先撇开问题,我们从头说起. 在网页排版中,有些时候是需要文本自动换行的,对于中文来讲,无需设置属性即可自动实现换行,但是对于 ...

CSS box-shadow 详解

CSS box-shadow 详解相关推荐

最新文章

热门文章