CSS漂亮盒子（下）

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;
}

参考资料：

• 菜鸟教程
• w3school
• 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德