我们在读纸质书的时候，经常用笔划波浪线来突出重点内容，以强化视觉感受。

而在Web页面上，没有CSS3之前，我们只能用背景图片来实现类似功能，这当然不是个高效的方式，且难于维护和调整。

比如你只是想调整下颜色、线条大小和倾斜的角度，你都得打开作图软件来折腾一下。

现在我们可以使用CSS3伪元素及其背景渐变(gradient)来实现这一有趣而实用的效果。

波浪线特征

我们观察下波浪线，有这么2个基本几何特征：

1. 波折线是重复的，可以被分解为若干相连的“角”形状

2. 这些“角”的连接点处是平滑过渡的，不能出现毛刺，所以需要对顶点处做平滑处理

对于(1)，我们可以首先创建一个尖角形状(由一撇一捺2条短直线组成)，然后使用x方向的repeat来重复。

对于(2)，我们可以使用渐变色，模拟人手划线时，在转弯处力道减弱，我们在尖角相交处使用相对淡色，构造出圆角的视觉感受。 CSS3线性渐变

我们注意到每个“角”都有2条边，如果以默认渐变轴(从上往下的一条垂直线)来看，左边的呈现45°倾斜，而右边的呈现315°倾斜。

那么如何创建一个45°的倾斜线呢？我们很容易想到用rotate变换，但是rotate是作用于整个元素上的，在这里并不适用。