4.多重背景
CSS支持一个元素设置多个背景图片。
每个背景属性有相应的多值语法，多个值由逗号分隔。
.multi-bg-shorthand {
width: 300px;
height: 200px;
background: url(img/spades.png) left top no-repeat,
url(img/hearts.png) right top no-repeat,
url(img/diamonds.png) left bottom no-repeat,
url(img/clubs.png) right bottom no-repeat,
pink;
}
如果随后的背景属性值少于背景图片的个数，那么相应的值会循环使用。
.multi-bg-shorthand {
width: 300px;
height: 200px;
background: url(img/spades.png) left top,
url(img/hearts.png) right top,
url(img/diamonds.png) left bottom,
url(img/clubs.png) right bottom,
pink;
background-repeat: no-repeat; /* 用于4张图片 */
}
5.边框与圆角
- 可以分别为盒子的各边设置边框，也可以一次性为四边设置边框
- 除非明确指定
box-sizing属性，否则边框宽度会影响盒子的尺寸 - 设置边框的样式使用
border-style - 可以使用
border简写属性来设置所有边框属性（border: 2px solid #000）
5.1 边框半径：圆角
给border-radius属性一个长度值，就可以一次性设置盒子四个角的半径。
border-radius: 0.5em;
分别设置每个圆角的半径，即从左上角开始，按顺时针方向依次列出各个值。
/* 每个值本身其实也是简写，它们各自表示相应圆角水平和垂直方向拥有相同的半径。 */
border-radius: 0.5em 2em 0.5em 2em;
如果想把每个角设置成非对称的，也可以用两组值分别指定两个方向的半径，先水平再垂直，两组值以斜杠分隔。
border-radius: 2em .5em 1em .5em / .5em 2em .5em 1em;
如果对角的值相同，那就可以省略右下和左下角的值。
/* 第一个值设置左上和右下角，第二个值设置右上和左下角。 */
border-radius:2em 3em;
5.2 创建正圆和胶囊形状
在给border-radius指定百分比值时，x轴和y轴分别相对于元素的宽度和高度来计算实际值。
<div class="round"></div>
<div class="round oval"></div>
div {
display: inline-block;
margin-right: 1em;
}
.round {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #59f;
}
.oval {
width: 300px;
}
"胶囊形"，即一个矩形的两端各带一个半圆形，这种形状在工程上称为“长圆形”（obrund）。
<a class="obrund" href="#">A ”pill-shape”</a>
a {
text-decoration: none;
color: #fff;
background-color: #59f;
padding: 1em;
}
.obrund {
border-radius: 999em; /* 任意非常大的值 */
}
5.3 边框图片
边框图片，即为元素指定一张图片作为边框。border-image属性支持把一张图片切成9块，我们只管定义切图规则，浏览器会自动把每一块应用到指定的边框位置。
.motto {
border: 40px solid #f9b256;
/* 加载图片picture-frame.png，在每边向内40像素的位置切开 */
border-image: url(img/picture-frame.png) 40;
}
注意：指定切片参考线位置的“40像素”没有px单位，这是为了同时适应SVG和位图而使用的小技巧。
必须把border简写属性放在border-image属性前面，因为规范规定简写语法会重置所有边框属性。
6.盒阴影
使用box-shadow属性给元素添加阴影。
/* x轴偏移 y轴偏移 模糊半径 颜色 */
box-shadow: .25em .25em .5em rgba(0, 0, 0, 0.3);
在模糊半径后面可以再加一个值，表示扩展半径，用于扩展阴影的大小。
box-shadow: 1em 1em .5em .5em rgba(0, 0, 0, 0.3);
使用关键字inset为元素应用内阴影。
box-shadow: inset .25em .25em .5em rgba(0, 0, 0, 0.3);
给一个元素应用多个阴影，以逗号分隔多组值。
box-shadow: 0 0 0 10px #1c318d,
0 0 0 20px #3955c7,
0 0 0 30px #546dc7,
0 0 0 40px #7284d8;
7.渐变
在背景上使用渐变色是一种常见设计，能给页面增加一种纵深感。
7.1 线性渐变
background-image: linear-gradient(to bottom, #cfdeee 0%, #8da9cf 100%);
linear-gradient()函数第一个参数表示渐变线的方向。
渐变线总是始于元素的一个边或一个角，然后穿过元素的中心区域。
线性渐变的默认方向是自上而下（to bottom）。而0%和100%分别表示第一个和最后一个色标的位置。
因此，前面的例子可以简写如下：
background-image: linear-gradient(#cfdfee, #8da9cf);
可以使用deg单位指定渐变线的角度，0deg表示垂直向上，增大角度值就意味着沿顺时针方向旋转，直到360度。
background-image: linear-gradient(45deg, #cfdfee, #4164aa);
新增色标若未指定位置，则在0%~100%范围内取均值。
/* 5个未指定位置的色标：0%、25%、50%、75%、100% */
background-image: linear-gradient(red, green, blue, yellow, purple);
除了百分比，还可以使用绝对值指定色标位置。
/* 从顶部浅蓝色开始，往下到100像素位置时过渡到深蓝色，然后一直到背景图片区域底部都是同样的深蓝色 */
background-image: linear-gradient(#cfdfee, #8da9cf 100px);
7.2 放射渐变
放射渐变从一个中心点开始向四周扩散，覆盖的范围可以是圆形或椭圆形。
- 放射渐变的类型：圆形（circle）和椭圆形（ellipse）。
- 射线半径决定渐变范围大小。圆形只接受一个半径值，而椭圆形接受x轴和y轴两个方向的半径值。椭圆形可以接受任意长度或百分比值，百分百值相对于轴向的背景图片大小。圆形只接受长度值，不接受百分比值。此外，还可以使用关键字代表渐变区域结束的位置。
closest-side和farthest-side分别表示渐变区域延伸至最近边还是最远边，closest-corner和farthest-corner分别表示渐变区域边缘接触最近角还是最远角。 - 色标沿渐变扩展方向指定，以逗号分隔。
background-image: radial-gradient(circle closest-corner at 20% 30%, #cfdfee, #2c56a1);
上面的例子的渐变区域中心位置为x轴方向20%，y轴方向30%，放射半径为该中心到最近角的距离。在圆周外部，由终点色标颜色覆盖整个背景图片区域。
7.3 重复渐变
重复渐变函数可以沿渐变直线（或射线）重复某个渐变色标组合，重复次数视其大小（由background-size决定）及允许的大小（元素大小）而定。
/* 重复的线性渐变 */
background-image: repeating-linear-gradient(#cfdfee, #2c56a1 20px);
/* 重复的放射渐变 */
background-image: repeating-radial-gradient(#cfdfee, #2c56a1 20px);
7.4 把渐变当作图案
body {
margin: 0;
background-color: #fff;
background-image: linear-gradient(
transparent,
transparent 50%,
rgba(55, 110, 176, 0.3) 50%
),
linear-gradient(
to right,
transparent,
transparent 50%,
rgba(55, 110, 176, 0.3) 50%
);
background-size: 40px 40px;
}
桌布似的花格图案：
把相邻的两个色标（transparent 50%和rgba(55, 110, 176, 0.3) 50%）重叠在一起，让渐变无从发生，而是突然的变化，形成锐利的线条。
通过background-size: 40px 40px;控制背景大小和重复。
渐变图案、盒阴影以及伪元素，这些加起来完全可以代替图片来实现各种创意。
7.5 为嵌入图片和元素添加样式
文档中的图片与其他元素不同，它本身是有像素宽度和高度的，而且宽度和高度的比例固定。在可伸缩的设计中，元素宽度要随浏览器窗口宽度变化而变化，此时也需要CSS来控制图片及其他嵌入的元素。
7.5.1 可伸缩的图片模式
<div class="img-container">
<img src="img/profile.jpg" alt="Charles the Cat">
</div>
<div class="img-container img-container-large">
<img src="img/profile.jpg" alt="Charles the Cat">
</div>
.img-container {
padding: 1em;
border: 1px solid #777;
border-radius: 1em;
width: 100px;
display: inline-block;
vertical-align: top;
margin-right: 2em;
}
img {
max-width: 100%;
}
.img-container-large {
width: 500px;
}
根据需要把图片渲染成不同大小（所谓的响应式图片）对性能影响很大。max-width属性意味着图片会随着包含它的容器缩小而缩小，但在容器变大时，它不会大到超出自身的固有尺寸。
7.5.2 控制对象大小的方法
object-fit属性的默认值为fill，意味着图片内容会在必要时拉伸以填满容器，因此可能破坏宽高比。
参考：object-fit - CSS(层叠样式表) | MDN
7.5.3 可保持宽高比的容器
对于具有固定宽高比的位图，把高度设置为auto，只改变宽度，或者把宽度设置为auto，只改变高度，都是可以的。iframe和object元素没有固定的宽高比。CSS规范指出，对于没有指定大小的可替代内容，最终的默认大小为300像素宽或150像素高。（听上去不可思议，但这是真的！）
在页面中包含可伸缩的嵌入对象：
<div class="object-wrapper">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
.object-wrapper {
width: 100%;
height: 0;
position: relative;
padding-bottom: 75%; /* 315÷420，高度是宽度的75% */
}
.object-wrapper iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
参考资料：