Css权威指南(4th，第四版中文翻译)-9.Colors，Ba
还记得你第一次改变网页的颜色么？是不是特别兴奋，可以使用任意的颜色组合来设置背景也好，边框也好，超链接也好。CSS支持让你对网页或是元素应用不同的颜色和背景。
Colors
在CSS中，你可以设置元素的前景色和背景色。如果想要理解这是怎么工作的，就需要先理解什么是前景。通俗的说，它就是元素的文本，当然也包括border。所有有两种方式可以直接的影响元素的前景色：使用color属性和设置border color属性。
前景色
就简单的方法来设置前景色就是使用color属性：
image.png
属性接受任何有效的颜色类型，例如：#FFCC00 或是rgba(100%, 80%,0%,0.5).
对于不可替代的元素，例如段落p和em，color设置元素的额文本颜色：
<p style="color: gray;">This paragraph has a gray foreground.</p>
<p>This paragraph has the default foreground.</p>
image.png
修改border
color颜色同样作用域border：
p.aside {color: gray; border-style: solid;}
image.png
p.aside的border颜色与color的相同，当然也可以通过border-color来覆盖这个颜色：
p.aside {color: gray; border-style: solid; border-color: black;}
这里面值得注意的是一个特殊的颜色：currentColor，这是是自动计算出来的。所以在很多浏览器的默认设置里面就有一条：
* {border-color: currentColor;}
对表单元素的影响
颜色的设置理论上同样会应用于表单元素：
select {color: rgb(33%,33%,33%);}
我们同样可以设置input元素的前景色：
select {color: rgb(33%,33%,33%);}
input {color: red;}
image.png
有没有注意到上图中checkbox的颜色还是黑的，这是因为颜色仅作用域input和select，而不是正常的段落文本。
颜色的继承
从颜色的定义来看，颜色是支持继承的。这从逻辑上时合理的。
em {color: red;}
p {color: gray;}
image.png
Backgrounds
默认的背景的覆盖范围包括所有内容区域直到border的外边界。CSS支持单独的颜色背景或是一张或多张图片背景，并且支持线性和辐射渐变。
背景颜色属性
image.png
如果想要颜色在text周围多扩展一点，就可以添加一点padding来实现:
p {background-color: #AEA;}
p.padded {padding: 1em;}
<p>A paragraph.</p>
<p class="padded">A padded paragraph.</p>
image.png
特殊效果
通过结合color和backgound-color，你可以创造很多有趣的效果：
h1 {color: white; background-color: rgb(20%,20%,20%);
font-family: Arial, sans-serif;}
image.png
下面的样式会稍微复杂些：
body {color: black; background-color: white;}
h1, h2 {color: yellow; background-color: rgb(0,51,0);}
p {color: #555;}
a:link {color: black; background-color: silver;}
a:visited {color: gray; background-color: white;}
image.png
接下来一个有趣的问题就是如果给一个可替换元素设置背景效果是怎么样的。比如说你想要加一个双层的边框，就可以通过设置padding和border来实现：
img.twotone {background-color: red; padding: 5px; border: 5px solid gold;}
image.png
技术上说，背景是要达到border的外层边界的，不过由于一般的border都是solid且连续的，所以可能还看不到。
背景剪切
在上一章节，我们看到了背景完整填充了元素的整块区域。不过借助backgound-clip可以让你控制元素背景可以延伸到什么位置：
image.png
默认的话是到border-box，如果选择padding-box的话，那么背景只会到padding的区域；content-box类似。来看个具体的例子：
div[id] {color: navy; background: silver; padding: 1em; border: 5px dashed;}
#ex01 {background-clip: border-box;} /* default value */ #ex02 {background-clip: padding-box;}
#ex03 {background-clip: content-box;}
image.png
看上去非常简单，不过其实也有不少的缺陷。比如说第一background-clip对于根节点就没有效果；第二就是若果元素设置了圆角，那么剪切的背景区域也会受到影响；第三就是clip与background-repeat的兼容性不是很好；第四就是clip属性只定义了背景区域，但是是无法影响其他的背景属性的，这会在后面章节中看到问题所在。
最后一个值text，将背景设置为文本区域。为了达到这个效果，你想要移除前景色，否则前景色会遮挡背景，来看看下面的例子：
div {color: rgb(255,0,0); background: rgb(0,0,255); padding: 0 1em; margin: 1.5em 1em; border: 5px dashed; font-weight: bold;}
#ex01 {background-clip: text; color: transparent;}
#ex02 {background-clip: text; color: rgba(255,0,0,0.5);} #ex03 {background-clip: text;}
image.png
背景图片
在讲完了前景色和背景色以后，我们来看看背景图片。在早期的HTML3.2时代，可以直接在BODY的属性中声明背景：
<BODY BACKGROUND="bg23.gif">
使用一张图片
image.png
默认值为none，这是符合预期的：
body {background-image: url(bg23.gif);}
如果图片尺寸小于背景的话，图片就会做挖片状的平铺。而一般来说，在定义背景图片的同时也会设置一个背景的颜色，回头再说原因。
背景图片对于block和inline元素都是支持的：
p.starry {background-image: url(http://www.site.web/pix/stars.gif); color: white;}
a.grid {background-image: url(smallgrid.gif);}
<p class="starry">It's the end of autumn, which means the stars will be brighter than ever! <a href="join.html" class="grid">Join us</a> for a fabulous evening of planets, stars, nebulae, and more...
image.png
有时候你需要为文件链接添加对应的类型标识，例如pdf等，就可以使用背景图片来显示：
a[href] {padding-left: 1em; background-repeat: no-repeat;} a[href$=".pdf"] {background-image: url(/i/pdf-icon.png);}
a[href$=".doc"] {background-image: url(/i/msword-icon.png);} a[href^="mailto:"] {background-image: url(/i/email-icon.png);}
image.png
跟background-color一样，background-image也不是继承的
为什么背景属性都无法继承
那我们来假定背景属性如果可以继承那会是什么样子吧，我们在body添加了背景，所以其下面的所有元素都会继承，然后由于所有的元素背景都是从左上角开始重新绘制，因此就会出现下面这样的交叠图样，想必这不是大家所希望看到的。
image.png
那如果真要实现这个怎么办，可以这样定义：
* {background-image: url(yinyang.png);}
或是修改inherit：
body {background-image: url(yinyang.png);}
* {background-image: inherit;}
背景定位
之前我们只是将背景图片放到了元素中，但能否更进一步确定放置的位置呢？答案是肯定的，就用background-position就可以。
image.png
举例来说，我们可以在body元素中居中显示一张背景图：
body {background-image: url(yinyang.png);
background-repeat: no-repeat;
background-position: center;}
image.png
我们在设置的时候只是载入了单张图片，同时防止他重复。而这张最初使用的图片被称之为原始图片（origin image）。
属性中定义了很多关键词来设置原始图片，例如top，bottom，left，right和center。一般来说都是成对出现的，不过也有例外。同时像50px或是2cm这种长度值也是可以的。
定义位置的关键词可以以任何的顺序来提供，只要不超过2个就行，1个代表水平方向，1个代表垂直方向。如果只提供了一个，那么另一个默认就是center。
百分比数值
百分比的数值是同时作用域背景和原始图片的，来看个例子：
p {background-image: url(yinyang-sm.png);
background-repeat: no-repeat;
background-position: 33% 66%;}
image.png
如果只给了一个数值的话，那么就会默认是水平方向的设置，而垂直方向会是默认的50%：
p {background-image: url(yinyang-sm.png);
background-repeat: no-repeat;
background-position: 25%;}
image.png
下面给出关键词和百分比的对应图：
image.png
长度值
最后，我们来看下定位中的长度值。如果设置了长度，那么就会被解析为背景左上角开始的偏移值。举个例子：
background-image: url(chrome.jpg);
background-repeat: no-repeat;
background-position: 20px 30px;
image.png
百分比和数值是有差异的，我们有时候可以结合两者来达到最佳的效果。举例来说，如果你想要将一个背景图片一致放在背景的右边，从上到下10px的位置，就可以这样定义：
p {background-image: url(yinyang.png);
background-repeat: no-repeat;
background-position: 100% 10px; border: 1px dotted gray;
}
image.png
负值
负值的作用就是讲背景图片拉出元素背景，如果原始图片的宽度和高度都是300px，那么来看下：
body {background-image: url(yinyang.png); background-repeat: no-repeat; background-position: -200px -200px;}
image.png
改变offset的边界
在之前我们有2个假定，一个是关键词不超过2个，另一个是offset的计算方向是从背景区域的左上角开始的。在以前都是这样的，不过现在的话改进了，最多支持4个关键词。
让我们从一个最简单的例子开始：讲原始图片放到3分之一的位置，并且距离top 30px的地方。按照我们之前的说法可以这样设置：
background-position: 33% 30px;
现在其实我们可以扩充到4个参数：
background-position: left 33% top 30px;
那如果我们想要从右下角开始算呢，就可以：
background-position: right 33% bottom 30px;
image.png
而且水平和垂直的位置也是可以互换的，例如：bottom 30px right 25%,另外，offset字段也是可以省略的，CSS会默认置0：
image.png
改变定位box
通过上面的学习，我们熟悉了如果放一张背景图，如果设置背景图的位置，那么下一个问题就是背景图的框可以改么，当然可以：
image.png
这个属性看上去和background-clip很相似，不过功能上却差别很大。background-origin定义的是背景的定位区域，而background-clip定义的是背景的绘制区域。
这个默认的职位padding-box，意思是将原始图片的左上角位置定位到padding的外边界，或者说是border的内边界。
如果换成了border-box，或是content-box，那么左上角会放到对应的border和content区域中。来看个例子：
div[id] {color: navy; background: silver; background-image: url(yinyang.png);
background-repeat: no-repeat;
padding: 1em; border: 5px dashed;}
#ex01 {background-origin: border-box;}
#ex02 {background-origin: padding-box;} /* default value */ #ex03 {background-origin: content-box;}
image.png
背景图案的重复设置
image.png
属性的值看起来很多其实都比较简单直接，基本的就4个：repeat，no-repeat，space和round。另外两个repeat-x和repeat-y其实是基本4个的组合而已，我们在下表中将它们拆分一下：
image.png
body {background-image: url(yinyang-sm.png); background-repeat: repeat-y;}
image.png
body {background-image: url(yinyang-sm.png); background-repeat: repeat-x;}
image.png
body {background-image: url(yinyang.png); background-repeat: no-repeat;}
image.png
重复和定位
p {background-image: url(yinyang-sm.png); background-position: center;
border: 1px dotted gray;}
p.c1 {background-repeat: repeat-y;} p.c2 {background-repeat: repeat-x;}
image.png
另外，如果将图片设置在中间同时让它像两边repeat，那么就会向四周蔓延：来看下和从左上角开始的区别
image.png
space 和 round
跟之前一样，space和round用于是背景图案不至于被切割：
div#example {background-image: url(yinyang.png); background-repeat: space;}
image.png
如果仔细观察的话会发现背景图从4个角落开始排布，而这就是space选项所要做的，它会判断能放下多少个背景图案。
image.png
如果一张图片特别大，大到放不下一整个怎么办？难道就不显示了么，其实还是显示的，而为之会依赖于background-position：
div#example {background-image: url(yinyang.png); background-position: center;
background-repeat: space;}
image.png
和space相对的是round，round不会覆盖background-position，但会按照不同方向的比例调整背景图的尺寸，来看个例子：
body {background-image: url(yinyang.png); background-position: top left; background-repeat: round;}
image.png
图案裁剪
我们知道background-clip是用来改变背景绘制区域的，而background-origin是用来改变背景图案放置位置的，那如果这两个区域不一致怎么办？答案就是会出现部分的裁剪，这是因为space和round的计算都是基于背景的放置区域，而不是绘制区域。可以看下下面这几个例子：
image.png
所以为了达到你想要的结果，最好将background-origin和background-clip都设置为padding-box。
绑定背景
有时候背景区域特别大，然后把图片放在中间会导致一开始用户完全看不到图片，有没有办法能组织这种情况？当然有
image.png
通过使用background-attachment，可以把背景固定住：
body {background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center; background-attachment: fixed;}
image.png
对于浏览器来说，视口区域其实是会由于用户改变窗口而改变的,而这会是背景中的图片位置也随之改变。
和fixed值相对的就是local，这个值让背景图片随着内容一起滚动。首先来看下没有attachment的情况：
aside {background-image: url(yinyang.png); background-position: top right; max-height: 20em;
overflow: scroll;}
在这种情况下，如果内容高于20em，剩余的内容就会通过一个滚动条来展示，而背景图片不会随着内容滚动，而是始终停留在左上角。
接下来我们来添加background-attachment：local来实现图片的滚动显示：
aside {background-image: url(yinyang.png); background-position: top right;
background-attachment: local; /* attaches to content */ max-height: 20em;
overflow: scroll;}
image.png
属性还有另一个值就是scroll，而且也是默认值，这会使得背景图随着文档内容二滚动。
修改背景图片大小
image.png
首先看个例子，让我们把之前的200 x 200的图案变大2倍看下效果：
main {background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center; background-size: 400px 400px;}
image.png
数值可大可小，也可以使用不同的单位：
main {background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center; background-size: 4em 4em;}
main {background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center; background-size: 400px 4em;}
如果让图片repeat的话，那么就会以定的大小来重复：
main {background-image: url(yinyang.png); background-repeat: repeat; background-position: center; background-size: 400px 4em;}
image.png
对于值来说，第一个为水平方向，第二个为垂直方向。
下面来看下百分比数值的情况，百分比的参照是背景的定位区域，也就是有background-origin来定义的。加入你需要图片的背景大小为背景的一半，就可以这样设置：
main {background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center; background-size: 50% 50%;}
image.png
cover和contain
这个选项比较有意思了，如果你想要让一张图片覆盖全部的背景区域，而且不关心有没有超出背景绘制区域，那么就可以使用cover选项：
main {background-image: url(yinyang.png); background-position: center; background-size: cover;}
image.png
你可以看到cover和100% 100%其实还不太一样，如果我们使用后者，图片会被填充到所有的区域.而cover怎么做呢，举个例子，如果是一个800 x 400的背景，而图片只有200 x 200，那么cover会将图片扩展到800 x 800，然后将图片居中显示，上下会有部分被裁掉：
image.png
和cover相反，contain会把内容严格限制在背景区域里面，及时留下空白：
main {width: 800px; height: 400px; background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center; background-size: contain;}
image.png
如果把no-repeat去掉的话来看看什么效果：
image.png
背景的缩写
image.png
举例来看,下面所有的样式都是一样的：
body {background-color: white; background-image: url(yinyang.png); background-position: top left; background-repeat: repeat-y; background-attachment: fixed; background-origin: padding-box; background-clip: border-box; background-size: 50% 50%;}
body {background:white url(yinyang.png) repeat-y top left/50% 50% fixedpadding-box border-box;}
body {background:
fixed url(yinyang.png) padding-box border-box white repeat-y
top left/50% 50%;}
body {background:
url(yinyang.png) top left/50% 50% padding-box white repeat-y fixed border-box;}
image.png
由上面可以看到，在某些顺序上可以自由的设置，不过仍然有3条限制：
- background-size的值必须紧跟在background-position的后面，而且得以一个斜杠作为分隔符；
- 水平方向的值在前面，垂直的在后面；
- 如果同时存在background-origin和background-clip的值，前者优先解析，也就是说下面两个是一样的：
body {background:
url(yinyang.png) top left/50% 50% padding-box border-box white
repeat-y fixed;}
body {background:
url(yinyang.png) top left/50% 50% padding-box white repeat-y
fixed border-box;}
如果只设置了一个值，那么origin和clip会同时设置。例如：
body {background:
url(yinyang.png) padding-box top left/50% 50% border-box;}
既然是缩略写法就会有一系列的默认值，比如下面两个就是一样的：
body {background: white url(yinyang.png;}
body {background: white url(yinyang.png) transparent 0% 0%/auto repeat
scroll padding-box border-box;}
多个背景
大多数的背景属性其实都是接受多个值得，只要用逗号分隔，就像下面这样：
section {background-image: url(bg01.png), url(bg02.gif), url(bg03.jpg); background-repeat: no-repeat;}
image.png
从上图看出所有的背景图都叠加自一起了，我么可以通过设置将每个分开：
section {background-image: url(bg01.png), url(bg02.gif), url(bg03.jpg); background-position: top right, left center, 50% 100%; background-repeat: no-repeat;}
image.png
渐变
在CSS中定义了两种渐变：线性渐变(linear gradient)和辐射渐变(radial gradient)。而两种类型下面再定义两种子类型：可重复的和不可重复的。
image.png
在我们后面讨论渐变的时候，请默认将他们理解为图片。而渐变最有意思的特点就是没有固有尺寸，所以会默认填充所有背景放置区域。
线性渐变
#ex01 {background-image: linear-gradient(purple, gold);}
#ex02 {background-image: linear-gradient(90deg, purple, gold);}
#ex03 {background-image: linear-gradient(to left, purple, gold);}
#ex04 {background-image: linear-gradient(-135deg, purple, gold, navy);}
#ex05 {background-image: linear-gradient(to bottom left, purple, gold, navy);}
image.png
可以看到就基本的就是提供一个方向和两个颜色值，默认值为to Bottom，用数值来表示的话就是180deg或是0.5turn。基本的语法如下：
image.png
渐变色
渐变的颜色支持rgba：
#ex01 {background-image:
linear-gradient( to right, rgb(200,200,200), rgb(255,255,255) );}
#ex02 {background-image:
linear-gradient( to right, rgba(200,200,200,1), rgba(200,200,200,0) );}
image.png
另外，中间过渡的颜色点的格式是没有限制的,用逗号隔开：
#wdim {background-image: linear-gradient(90deg,
red, orange, yellow, green, blue, indigo, violet, red, orange, yellow, green, blue, indigo, violet );
image.png
如果没有指定颜色的位置，那么css就会采取等分的策略，而颜色位置的添加语法为：
image.png
支持两种值，数值和百分比，数据比较简单，就是从开始的像素值：
#spectrum {background-image: linear-gradient(90deg,
red, orange 25px, yellow 50px, green 75px,
blue 100px, indigo 125px, violet 150px)};
image.png
上面的例子中颜色的渐变老早就结束了，所以后面颜色就延续了最后的颜色，而如果颜色的定义很长，那么实际的结果就是计算到对应的渐变边界：
#spectrum {background-image: linear-gradient(90deg,
red, orange 200px, yellow 400px, green 600px,
blue 800px, indigo 1000px, violet 1200px)};
image.png
另外我们可以使用任何的长度单位，包括像素，em，inch等等。如果设置的是百分比，那么参照的长度就是渐变的总长度。，来看个例子：
#spectrum {background-image: linear-gradient(90deg,
red, orange 10%, yellow 20%, green 30%, blue 40%, indigo 50%, violet 60%)};
image.png
设置颜色点
颜色点又称为color hint，用途是来改变两个颜色之间的渲染方式。举例来说：
#ex01 {background: linear-gradient(to right, #000 25%, rgb(90%,90%,90%) 75%);} #ex02 {background: linear-gradient(to right, #000 25%, 33%, rgb(90%,90%,90%)
75%);}
#ex03 {background: linear-gradient(to right, #000 25%, 67%, rgb(90%,90%,90%)
75%);}
#ex04 {background: linear-gradient(to right, #000 25%, 25%, rgb(90%,90%,90%)
75%);}
#ex05 {background: linear-gradient(to right, #000 25%, 75%, rgb(90%,90%,90%)
75%);}
image.png
了解渐变线的绘制原理
来个简单的例子：
linear-gradient(
55deg, #4097FF, #FFBE00, #4097FF
)
首先CSS会按照定义生成一条简便的线段，确定其开头和结尾的位置：
image.png
这个生成线段的过程就像创建一张图片,然后将每个颜色放到对应的位置上，生成单条的渐变色，就像下图所示：
image.png
而下一个问题就是如何将生成的颜色覆盖背景范围。其实接下来，css会在渐变线的垂直方向来做颜色的延展：
image.png
然后基于背景边框选取需要渲染的范围：
image.png
辐射渐变
辐射渐变的语法如下：
image.png
来看个最简单的例子：
.radial {background-image: radial-gradient(purple, gold);}
image.png
由于没有设置位置，所有默认的都是center；同时也没有设置形状，所以默认的为椭圆。
形状和大小设置
大小可以作为第一个参数传入，只要是个非负值就可以。
radial-gradient(50px, purple, gold)
注意这个值定义的是半径，如果再给第二个半径，俺么就会作为椭圆来处理：
radial-gradient(50px 100px, purple, gold)
image.png
而且百分比值也是可以的：
radial-gradient(50% 25%, purple, gold)
image.png
放置辐射渐变
设置渐变位置的值跟background-position其实是一样的。来看几个例子：
radial-gradient(at bottom left, purple, gold);
radial-gradient(at center right, purple, gold);
radial-gradient(at 30px 30px, purple, gold);
radial-gradient(at 25% 66%, purple, gold);
radial-gradient(at 30px 66%, purple, gold);
image.png
位置可以配合之前的大小设置一起使用：
radial-gradient(30px at bottom left, purple, gold);
radial-gradient(30px 15px at center right, purple, gold);
radial-gradient(50% 15% at 30px 30px, purple, gold);
radial-gradient(farthest-side at 25% 66%, purple, gold);
radial-gradient(farthest-corner at 30px 66%, purple, gold);
image.png
设置渐变的颜色点
辐射渐变的颜色点设置其实是差不多的，下面两个值是一致的:
radial-gradient(purple, gold);
radial-gradient(purple 0%, gold 100%);
如果给了一个值，那么就会默认放置在中间位置：
radial-gradient(100px circle at center, purple 0%, green, gold 100%);
image.png
辐射渐变的颜色设置从中心点开始，延伸一个半径的距离，然后生成不同的色环：
image.png
操作渐变图片
之前说了我们可以将渐变来当做图片使用，那么背景图片的各种属性都是可以使用的，比如说通过辐射渐变来设计斑点图：
body {background: tan center/25px 25px repeat radial-gradient(circle at center,
rgba(0,0,0,0.1), rgba(0,0,0,0.1) 10px,
transparent 10px, transparent);}
image.png
用渐变图片也是有好处的：
- CSS比图片小多了
- PNG等需要访问服务器，降低了性能
- 改变CSS更容易，便于修改
利用渐变我们也可以做出很不错的效果：
image.png
background-image:
linear-gradient(0deg, rgba(255,128,128,0.25), transparent 75%), linear-gradient(89deg,
transparent, transparent 30%,
#510A0E 35%, #510A0E 40%, #61100F 43%, #B93F3A 50%,
#4B0408 55%, #6A0F18 60%, #651015 65%, #510A0E 70%,
#510A0E 75%, rgba(255,128,128,0) 80%, transparent),
linear-gradient(92deg,
#510A0E, #510A0E 20%, #61100F 25%, #B93F3A 40%, #4B0408 50%,
#6A0F18 70%, #651015 80%, #510A0E 90%, #510A0E);
background-size: auto, 300px 100%, 109px 100%; background-repeat: repeat-x;
重复渐变
h1.exmpl {background:
linear-gradient(-45deg, black 0, black 25px, yellow 25px, yellow 50px) top left/40px 40px repeat;}
image.png
阴影
在之前的章节中我们讨论了text-shadow，而这次其实是为box元素添加的shadow：
image.png
#box {background: silver; border: medium solid; box-shadow: 10px 10px rgba(0,0,0,0.5);}
image.png
.box:nth-of-type(1) {box-shadow: 1em 1em 2px rgba(0,0,0,0.5);} .box:nth-of-type(2) {box-shadow: 2em 0.5em 0.25em rgba(128,0,0,0.5);} .box:nth-of-type(3) {box-shadow: 0.5em 2ch 1vw 13px rgba(0,128,0,0.5);} .box:nth-of-type(4) {box-shadow: -10px 25px 5px -5px rgba(0,128,128,0.5);} .box:nth-of-type(5) {box-shadow: 0.67em 1.33em 0 -0.1em rgba(0,0,0,0.5);} .box:nth-of-type(6) {box-shadow: 0.67em 1.33em 0.2em -0.1em rgba(0,0,0,0.5);} .box:nth-of-type(7) {box-shadow: 0 0 2ch 2ch rgba(128,128,0,0.5);}
image.png
最后有个inset关键词，如果box-shadow使用了inset，那么施加的阴影都会在元素内部回执：
.box:nth-of-type(1) {box-shadow: inset 1em 1em 2px rgba(0,0,0,0.5);} .box:nth-of-type(2) {box-shadow: inset 2em 0.5em 0.25em rgba(128,0,0,0.5);} .box:nth-of-type(3) {box-shadow: 0.5em 2ch 1vw 13px rgba(0,128,0,0.5) inset;} .box:nth-of-type(4) {box-shadow: inset -10px 25px 5px -5px rgba(0,128,128,0.5);} .box:nth-of-type(5) {box-shadow: 0.67em 1.33em 0 -0.1em rgba(0,0,0,0.5) inset;} .box:nth-of-type(6) {box-shadow: inset 0.67em 1.33em 0.2em -0.1em rgba(0,0,0,0.5);} .box:nth-of-type(7) {box-shadow: 0 0 2ch 2ch rgba(128,128,0,0.5) inset;}
image.png
小结
设置颜色和背景极大扩展了用户的能力，而CSS相对于传统方式的优势其实是颜色和样式可以适用于文档中的任何元素。
