[CSS] 利用 CSS3 构建纸质笔记效果

本篇文章主要介绍如何利用图片和文字的构建纸质笔记效果。文中例子可以通过此网站下载，密码 although。

background-size

要构造类似笔记本的效果，我们需要有一个纸质线条笔记页的背景图像。如下图基础页面所示：

但是仔细观察上图，会发现背景的行线和文字内容基线并没有对齐，我们可以通过 font-size 和 line-height 调整文字从而达到对齐的目的。但如果用户自行调整字体大小后这个对齐效果很有可能会失效。因此设置文字达到对齐效果并不是上策，我们可以利用 CSS3 中新加入的 background-size 特性。

background-size 的基本用法可以参考 W3C CSS3 background-size 属性。为了使背景图片的线条和文字一次缩放，我们需要设置缩放单位为 em，它是以当前字体高度为基准的相对单位。

在样式表中添加：

其中缩放的倍数依据文字的行高而定。调整完发现背景图确实按照文字大小比例缩放，但是不可能每行都那么精准的对齐，这就需要考虑实际情况并继续微调。

单一容器上的复合背景图片

在 CSS3 之前，每个容器只能指定一张背景图片，因此每张背景图片都至少需要添加一个容器，这样很容易造成多重嵌套并且难以管理。通过使用 CSS3 的 background-image 或者 background 可以解决这个问题。

要添加多个图片，需要实现下列代码：

需要注意的是最先声明的图片将会居于最上层，因此作为主背景的图片需要往后放。声明图片后还需要告诉浏览器如何对图片进行定位，是否重复以及图片大小。在 background 属性中，顶层图片的定义包含所有可能的值（position,size,repeat,attachment,origin 等），但是 color 属性只能在底层的图片定义。接下来还需要在 background-size 中设置图片的大小。因此修改后的代码如下：

可以看到 background 和 background-size 中各个图片的设置都是按顺序设置的，用逗号分隔开。

此时的效果如下：

通过设置单一容器上的复合背景图片，我们可以使这些图片在页面中有更灵活的布局。别忘了我们使用渐进增强的开发方式，我们至少还需要在这之前设置一个单一的背景图，这样在复合背景图片无法生效时还能有主要的背景效果。

添加图片边框

考虑实现以下效果：

第一种方法，我们可以把上面的图片直接作为复合背景图片添加，但是需要注意的是这样的话上方图片中的圆孔会显示出它下面的背景图片，如果我们页面的背景只有一种单一背景色，可以通过填充颜色达到统一，而在当前的情况下，显然会显示出一些横线，因此这种方法是不行的。

第二种方法就是使用 border-image 代替 background-image。border-image 能让我们指定一张图片作为边框，进行切片，然后在边框上以拉伸或者平铺的方式来显示切片。基本用法可以参考 W3C CSS3 border-image 属性。要记住设置 border-image 的同时也要设置 border-width，这样才有足够的空间显示图片。

此时效果图如下：

我们发现背景图片会显示出来，因为边框默认是绘制在背景区域上层的。我们可以通过 background-clip 解决这一问题，需要注意的是 background-clip 必须写在 background 属性之后。

设置 background-clip 属性后，背景图片从边框图片下方移走了。

设置阴影效果

上一篇文章讲过阴影效果的设置，但要注意的是阴影效果并不会根据边框图片的实际形状而变化，例子中边框图片的阴影效果依旧是一条直线，为了避免这种情况我们只需将阴影效果远离左边。