CSS3学习笔记（3）——渐变、background 的使用、边框图片

渐变

由于渐变效果不是单一的颜色，而是图像，因此应该写在 background 中。如

background: linear-gradient(to right,red 0%,blue 100%);

线性渐变

线性渐变可以理解为就是沿着一条线去做颜色的渐变。

语法：linear-gradient(方向, 颜色1 位置百分比, 颜色2 位置百分比, 颜色3 位置百分比...)

说明：

方向可以是关键字，也可以是度数。例如 to top 就是 0deg，to right 就是 90deg，自然右上方就是 45deg，以此类推。

颜色1一般代表开始的颜色，位置百分比就是所在位置。如0%代表开始位置，100%代表结束位置，50%代表中间位置。

径向渐变

径向渐变就是由一点往周围渐变。

语法：radial-gradient(形状 大小 坐标, 颜色1 位置百分比, 颜色2 位置百分比...)

说明：

形状—— circle 表示产生正方形的渐变；ellipse 表示自动适配当前的容器形状（默认）；

大小—— closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角（默认）。

坐标：以左上角为坐标原点，设置X和Y坐标。注意，写横纵坐标前要加 at：

background: radial-gradient(circle farthest-corner at 0px 0px,red,red 30%,blue 70%,blue);

重复渐变

重复渐变主要就是 repeating-radial-gradient() 和 repeating-linear-gradient()。我认为通过一个案例来记住它们更为有效：

background: repeating-radial-gradient(circle closest-side,
			#fff 0%,#fff 10%,
			#ff6700 10%,#ff6700 20%);

这里其实就是设置了两个环的颜色之后，剩下的自动补充至100%。实现效果为：