网站的好坏在于细节，在实现页面里某个组件的布局并写完样式之后，不要急着继续，有意识地训练自己，以挑剔的眼光审视刚刚完成的代码。
1 背景与渐变
| background-image | 指定文件或者生成的颜色渐变为背景图片。 |
| background-origin | 用于确定背景相对于元素的边框盒、内边框盒（初始值）或内容盒子来定位。
图 background-origin 的三个值效果 |
| background-clip | 指定背景是否应该填充边框盒（初始值）、内边距框盒或内容盒。
图 background-clip 的三个值效果 |
| background-position | 设置背景图的初始位置。 |
| background-size | 指定元素内背景图片的渲染尺寸。使用百分位的时候，根据background-origin 指定的位置来确定其元素内容大小。例如，上面background-origin的三个效果值中，指定的background-size 都为100%。 |
| background-repeat | 决定在需要填充整个元素时，是否平铺图片。 |
| background-attachment | 指定背景图片是随着元素上下滚动（初始值），还是固定在视口区域。（使用fixed值会对页面性能产生负面影响。） fixed: 固定在视口区域，此时背景的background-origin 参照的是视口。 scroll: 随着元素滚动。如果该元素允许滚动（overflow: auto），那么背景也不会滚动。 local: 随着元素滚动，如果该元素允许滚动，那么背景也会跟着滚动。
图 background-attachment 的三个值效果 |
| background-color | 指定纯色背景，渲染到背景图片下方。 |
表 background属性的组成
1.1 渐变
background-image 可以接受一个渐变函数。
图 渐变函数
1.1.1 渐变角度
linear-gradient 的第一个参数用于定义渐变的角度。 可以使用to top、to bottom、to bottom right。也可以使用更准确的单位。0deg 表示垂直向上，更大值会沿着顺时针变化，因此90deg 代表向右渐变（to right），180deg 表示to bottom。
| rad | 弧度，一个完整的圆是2π。 |
| turn | 环绕圆周的圈数。1 turn = 360deg。 |
| grad | 百分度。100 grad 相当于 90 deg(度). |
表 指定渐变方向的其他单位
图 渐变角度与方向的变化
1.1.2 多个颜色节点
一个渐变可以接受任意数量的颜色节点，节点之间通过逗号分隔。如果不知道这些节点的位置，则会自动均匀平铺这些颜色节点。节点位置可以通过百分号或者px来指定，跟在颜色值后面，空格符隔开。
图 多个颜色节点实现条纹
1.1.3 重复渐变
对于重复渐变，最好使用特定长度而不是百分比。
图 重复渐变
1.1.4 径向渐变
线性渐变是从元素的一端开始，沿着直线过度到另一端，而径向渐变不同，它是从一个点开始，全方位向外扩张。
图 径向渐变的例子
2 阴影
阴影是一种可以为网页增加立体感的特效。 有两个属性可以创建阴影，box-shadow 可以为元素盒子生成阴影，text-shadow 可以为渲染后的文字生成阴影。
默认情况下，阴影与元素的大小和尺寸相同。如果元素设置了border-radius，那么阴影相应地也会有圆角。阴影的水平偏移量(x)、垂直偏移量(y)和颜色都不可或缺。还有两个值是可选的：模糊半径和扩展半径。
box-shadow: Xpx Ypx 模糊半径px 扩展半径px color;
而text-shadow 只有4个参数（模糊半径可选）。没有扩展半径这个参数。
图 阴影效果
2.1 拟物化设计与扁平化设计
拟物化设计：把屏幕上的元素设计得如同真实世界的实物。追求尽量贴近真实世界。
扁平化设计： 扁平化设计选择接受现代社会已经日益数字化的事实。扁平化设计讲究色彩明快统一、外观简洁明了，这就意味着尽量少用渐变、阴影和圆角。
中庸设计： 介于扁平化设计与拟物化设计之间。
图 三种不同的设计效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="container"><div class="con"><button class="btn">Sign up now</button><div>拟物化</div></div><div class="con"><button class="btn">Sign up now</button><div>扁平化</div></div><div class="con"><button class="btn">Sign up now</button><div>中庸</div></div>
</div>
</body>
</html>
<style>.container {display: flex;padding-top: 30px;}.con {margin-left: 40px;text-align: center;}.btn {padding: 1em;border: 0;font-size: 0.8rem;color: white;border-radius: 0.5em;margin-bottom: 15px;}.con:nth-child(1) .btn {background-image: linear-gradient(to bottom,#57b,#148);box-shadow: 0.1em 0.1em 0.5em #124;}.con:nth-child(1) .btn:active {box-shadow: inset 0 0 0.5em #124,inset 0 0.5em 1em rgba(0,0,0,0.4);}.con:nth-child(2) .btn {background-color: #57b;box-shadow: 0 0.2em 0.2em rgba(0,0,0,0.15);}.con:nth-child(2) .btn:hover {background-color: #456ab6;}.con:nth-child(2) .btn:active {background-color: #148;}.con:nth-child(3) .btn {background-color: #57b;box-shadow: 0 0.4em #148;text-shadow: 1px 1px #148;}.con:nth-child(3) .btn:active {background-color: #456ab6;transform: translateY(0.1em);box-shadow: 0 0.3em #148;}</style>3 混合模式
混合模式用来控制叠放的图片怎样融合在一起。
| 变暗 | multiply | 前景色越亮，后景色显示出来的越多。 |
| darken | 选择两个颜色中较暗的那个。 | |
| color-burn | 加深背景色，增加对比度。 | |
| 变亮 | screen | 前景色越暗，背景色显示出来的越多。 |
| lighten | 选择两个颜色中较亮的那个 | |
| color-dodge | 加亮背景色，降低对比度。 | |
| 对比 | overlay | 对暗色使用multiply，对亮色使用screen，以增加对比度，对比效果较柔和。 |
| hard-light | 大幅度增加对比度，有点像叠加，但是使用加强版multiply或者screen,对比效果明显。 | |
| soft-light | 有点类似hard-light，但是使用burn/dodge代替multiply/screen。 | |
| 复合 | Hue | 将上层颜色的色相混合到下层颜色上。 |
| saturation | 将上层颜色的饱和度复合到下层颜色上。 | |
| luminosity | 将上层颜色的明度混合到下层颜色上。 | |
| color | 将上层颜色的色相和饱和度混合到下层颜色上。 | |
| 比较 | difference | 从亮色中减去暗色。 |
| exclusion | 类似于difference，但对比度稍弱。 |
表 混合模式的五大类
图 15种混合模式效果
3.1 实际应用
混合模式实际应用有：
- 使用某种颜色或渐变为图片着色。
- 为图片增加纹理效果，比如划痕或者老胶片放映时的颗粒感等。
- 缓和、加深或减小图片的对比度，使图片上的文字更具可读性。
- 在图片上覆盖一条文字条幅，但是还是想让图片完整显示。
-
图 纹理效果
3.1.1 融合混合模式
background-blend-mode属性只能局限于元素的背景使用。mix-blend-mode可以融合多个元素。
图 融合混合模式效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="blend"><h1>融合混合模式</h1>
</div>
</body>
</html>
<style>.blend {background-image: url("../asset/animal1.jpeg");background-size: 100%;width: 200px;height: 200px;display: flex;align-items: center;}.blend > h1 {margin: 0;font-size: 2rem;text-align: center;mix-blend-mode: hard-light;background-color: #c33;color: #808080;border: 0.1em solid #ccc;}
</style>
