背景、阴影和混合模式

1. 渐变

background 属性是以下八个属性的简写。

• background-image——指定一个文件或者生成的颜色渐变作为背景图片。
• background-position——设置背景图片的初始位置。
• background-size——指定元素内背景图片的渲染尺寸。
• background-repeat——决定在需要填充整个元素时，是否平铺图片。
• background-origin——决定背景相对于元素的边框盒、内边距框盒（初始值）或内容盒子来定位。
• background-clip——指定背景是否应该填充边框盒（初始值）、内边距框盒或内容盒子。
• background-attachment——指定背景图片是随着元素上下滚动（初始值），还是固定在视口区域。注意，使用 fixed 值会对页面性能产生负面影响。
• background-color——指定纯色背景，渲染到背景图片下方。

我们会学习这些属性。现在需要了解的是，使用简写属性（ background）可以设置指定的值，同时把其他属性重置为初始值。因此，在需要用到多个属性时，往往使用单独的属性。
background-image 属性非常有意思。你已经知道这个属性可以接受一个图片 URL 路径，而它也可以接受一个渐变函数。例如，定义一个从白色过渡到蓝色的渐变，如图所示。

渐变是一种非常有用的特效。我们先看看渐变是怎么工作的，然后再举一些实际例子。要尝试渐变，先创建一个新页面和样式表，添加代码清单1中的 CSS，其中使用了 linear-gradient()函数定义渐变。

.fade {
  height: 200px;
  width: 400px;
  background-image: linear-gradient(to right, white, blue);
}

渐变实际上就是背景图片，渐变本身不会影响元素的大小。为了演示，我们给元素明确设置了宽高。因为元素是空的，所以必须手动设置高度才能看到渐变效果。
linear-gradient 函数使用三个参数来定义行为：角度、起始颜色和终止颜色。这里角度值是 to right，意思是渐变从元素的左侧开始（这里是白色），平滑过渡到右侧（这里是蓝色）。也可以使用其他的颜色表示法，比如 hex（ #0000ff）、 RGB（ rgb(0, 0, 255)）或者 transparent关键字。把代码清单2中的元素添加到页面上查看渐变效果。

<div class="fade"></div>

有好几种不同的方式来指定渐变的角度。在本例中，我们使用了 to right，当然也可以使用 to top 或者 to bottom。甚至可以指定某个对角，比如 to bottom right，这样的话，渐变会从元素的左上角开始，逐渐过渡到右下角。
我们可以使用更确切的单位（比如度），更精确地控制角度。值 0deg 代表垂直向上（相当于 to top），更大的值会沿着顺时针变化，因此 90deg 代表向右渐变， 180deg 代表向下渐变，360deg 又会代表向上渐变。因此，代码清单3等价于之前的例子。

.fade {
  height: 200px;
  width: 400px;
  background-image: linear-gradient(90deg, white, blue);
}

度是最常用的单位，还有一些其他单位可以用来表示角度，如下所示。

• rad——弧度（ radian）。一个完整的圆是 2π，大概是 6.2832 弧度。
• turn——代表环绕圆周的圈数。一圈相当于 360 度（ 360deg）。可以使用小数来表示不足一圈，比如 0.25turn 相当于 90deg。
• grad——百分度（ gradian）。一个完整的圆是 400 百分度（ 400grad）， 100grad 相当于90deg。

可以尝试一下为渐变设置不同的值，看看效果如何。

1.1. 使用多个颜色节点

大部分渐变只需要两个颜色，从一个颜色过渡到另一个。也可以定义包含多个颜色的渐变，其中每个颜色可以称为一个颜色节点（ color stop）。下图展示了包含三个颜色节点的渐变（红色、白色和蓝色）。

为linear-gradient()函数添加更多的颜色，就可以插入多个颜色节点。按代码清单4更新样式表，然后在页面上查看渐变效果。

.fade {
  height: 200px;
  width: 400px;
  background-image: linear-gradient(90deg, red, white, blue);
}

一个渐变可以接受任意数量的颜色节点，节点之间通过逗号分隔。渐变会自动均匀地平铺这些颜色节点。在本例中，最左侧（ 0%）从红色开始，过渡到中间（ 50%）的白色，到最右侧的蓝色（ 100%）。我们也可以在渐变函数中为每个颜色节点明确指定位置。代码清单4中的渐变等价于下面的代码：

linear-gradient(90deg, red 0%, white 50%, blue 100%)

从这个例子你可能已经猜到了，颜色节点的位置可以调整，不是必须均匀分布。除了使用百分比来定位以外，还可以使用像素、 em 或者其他长度单位。

1. 条纹

如果在同一个位置设置两个颜色节点，那么渐变会直接从一个颜色变换到另一个，而不是平滑过渡。下图展示的渐变，从红色开始，直接变换到了白色，然后又变成了蓝色，整体呈现条纹状。

实现该渐变的具体代码如代码清单5所示，注意渐变中有四个颜色节点，其中两个是白色。

.fade {
  height: 200px;
  width: 400px;
  background-image: linear-gradient(90deg,
    red 40%, white 40%,
    white 60%, blue 60%);
}

因为第一个颜色节点是红色，在 40%的位置，所以渐变从左侧边缘一直到 40%是纯红色；因为第二个颜色节点是白色，也是在 40%的位置，所以渐变在这里直接变成了白色；接下来因为在60%的位置，还有一个白色的颜色节点，所以 40%到 60%之间的渐变是纯白色；最后一个颜色节点是蓝色，也是在 60%的位置，这样就会直接变换成蓝色，然后一直到右侧边缘是蓝色。

2. 重复渐变

前面的例子虽然只是为了演示，但也可以用来实现一些有意思的效果，特别是搭配另一个稍微有点不同的渐变函数时，这个函数就是 repeating-linear-gradient()。此函数和函数linear-gradient 的效果基本相同，唯一的区别就是前者会重复。这最终生成的条纹类似于理发店门口的旋转招牌，用在进度条上效果非常棒（如图所示）。

对于重复渐变，最好使用特定的长度而不是百分比，因为设置的值决定了要重复的图片大小。按代码清单6所示的条纹进度条的代码，更新样式表。

.fade {
  height: 1em;
  width: 400px;
  background-image: repeating-linear-gradient(-45deg,
    #57b, #57b 10px, #148 10px, #148 20px);
  border-radius: 0.3em;
}

1.2. 使用径向渐变

另一类渐变是径向渐变。线性渐变是从元素的一端开始，沿着直线过渡到另一端，而径向渐变不同，它是从一个点开始，全方位向外扩展。基本示例如图6所示。

按代码清单7中所示的径向渐变代码，编辑样式表。

.fade {
  height: 200px;
  width: 400px;
  background-image: radial-gradient(white, blue);
}

默认情况下，渐变在元素中是从中心开始，平滑过渡到边缘。渐变整体呈椭圆形，跟随元素大小进行变化（也就是说，较宽的元素，其径向渐变也较宽，反之亦然）。
跟线性渐变一样，径向渐变同样支持颜色节点。你可以提供多个节点，使用百分比或者长度单位指定节点位置。你也可以把径向渐变设置为圆形而非椭圆，甚至可以指定渐变中心点的位置。
repeating-radial-gradient()函数可以重复生成图样，形成同心圆环。这些特性大部分可以通过示例解释清楚，下图列举了几个例子以及相应的代码。建议你在页面中试一下，或者尝试修改成自己的代码。

前面的大部分例子使用了对照明显的颜色，这么做是为了突出效果，让渐变的行为清晰明了。不过在实际的项目开发中，要尽量少用差异如此明显的渐变颜色。
比如不要使用从白色到黑色的渐变，可以从白色渐变到浅灰色，或者在两个细微差别的蓝色之间渐变。这样不会让用户产生不适。某些情况下用户可能没有意识到渐变的存在，但这些渐变依然为页面营造了细微的立体感。

2. 阴影

阴影是另一种可以为网页增加立体感的特效。有两个属性可以创建阴影， box-shadow 可以为元素盒子生成阴影， text-shadow 可以为渲染后的文字生成阴影。
声明 box-shadow: 1em 1em black 生成了下图所示的阴影。其中 1em 代表偏移量，即阴影从元素的位置偏移了多少距离（先水平方向，后垂直方向）。如果偏移量都设置为 0，那么阴影会直接渲染在元素下方。 black 指明了阴影的颜色。

默认情况下，阴影与元素的大小和尺寸相同。如果元素设置了 border-radius，那么阴影相应地也会有圆角。阴影的水平偏移量（ x）、垂直偏移量（ y）和颜色都不可或缺。还有两个值是可选的：模糊半径和扩展半径。完整的语法如图所示。

模糊半径用来控制阴影边缘模糊区域的大小，可以为阴影生成一个更柔和、有点透明的边缘。扩展半径用来控制阴影的大小，设置为正值可以使阴影全方位变大，设为负值则会变小。