CSS学习笔记：渐变

CSS 渐变 是在 CSS3 Image Module 中新增加的

<image>

类型.

使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果.

用它代替图片，可以加快页面的载入时间、减小带宽占用。

同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此可以更加灵活、便捷的调整页面布局。

浏览器支持两种类型的渐变：线性渐变 (linear)，通过 linear-gradient 函数定义，以及 径向渐变 (radial)，通过 radial-gradient 函数定义.

渐变被定义成CSS中的

<image>

数据类型，因此在CSS中，它仅可以用在需要图像数据类型的地方。

由于这个原因，linear-gradient在background-color和其他需要以

<color>

为值的属性中使用无效。

线性渐变

线性渐变轴由渐变轴定义。轴上每一个点的颜色都不相同，每条垂直于渐变轴的线具有与交点相同的颜色。



渐变轴由包含渐变图形的容器的中心点和一个角度来定义的。渐变轴上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。

起始点：渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。

终点：渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。

不仅仅只有起点和终点的颜色值可以指定。提供额外的颜色中间点，Web开发者可以创造在起始颜色值和终点颜色值之间的自定义更强的过渡效果

语法

linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

angle：用角度值指定渐变的方向（或角度）

color-stop：由一个

<color>

值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的

<length>

）。

side-or-corner：描述渐变线的起始点位置。

它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。关键词的先后顺序无影响，且都是可选的。

to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。

渐变线的结束点与其起点中心对称。

简单线性渐变

background:linear-gradient(to bottom,blue,white)

to bottom表明方向是从上到下；起始点为蓝色，终止点为白色。



同理，从左到右的渐变：

background:linear-gradient(to right,blue,white)

可以同时指定水平方向和垂直方向的起始点使渐变对角线式的运行:

background: linear-gradient(to bottom right, blue, white);

私以为这种to语法很好理解，to bottom right表明从左上角开始到右下角终止的方向。

使用角度

角度是指渐变线与垂直线之间的角度，以顺时针方向旋转。

总之，0deg 创建一个从底部到顶部的垂直渐变，当变成90deg时生成一个从左到右的水平渐变。

background: linear-gradient(<angle>, red, white);

色标

渐近线的颜色停止点在该位置有特定的颜色。该位置可以被指定为线长度的百分比或一个绝对长度。为实现期望的效果，可以指定任意多个颜色停止点。

如果指定位置使用百分比，那么 0% 表示起点，100% 表示终点。然而，如果有需要，也可以使用范围之外的值。

background: linear-gradient(to bottom, blue, white 80%, orange);

需要注意的是第一个和最后一个色标并没有指定一个位置; 由于这个原因， 位置值0％和100%将分别自动的分配给第一个和最后一个色标 。中间的色标指定一个80%的位置, 把剩下的部分留给底部.

如果第一个颜色中间点没有定义长度或百分比，它将包含缺省值0。

如果最后一个颜色中间点没有定义长度或百分比，它将包含缺省值100%。

如果中间的颜色中间点没定义长度或百分比，那么它将被设定为前后两站的平均值。

下面看一个等间距色标的例子：

background: linear-gradient(to right, red, orange, yellow, green, blue,purple);
}

需要注意的是，没有指定位置时这些色标自动地均匀的隔开。

透明和渐变

渐变是支持透明度的。 举个例子，当你叠加多个背景层，你可以使用这个在背景图片上来创建淡入淡出的效果 :

background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

起始点为全透明的白色，终点为不透明的白色。叠加在图片上，营造了一种淡出的效果。

技巧

Gradient中两个不同颜色间默认是渐变的，但如果我们需要做出颜色明显变化的效果（锐变），就可以用在同一个位置声明不同颜色的方式实现。

background: linear-gradient(to right, red 50%,yellow 50% );

径向渐变

CSS radial-gradient()方法创建一个

<image>

，用来展示由原点（渐变中心）辐射开的颜色渐变。

径向渐变由其中心点、边缘形状轮廓及位置、色值结束点定义而成。



径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定。

色值结束点用于设定 虚拟渐变射线（virtual gradient ray）的变化方式，由中心点水平变化至右侧。

边缘形状只能为圆形或者椭圆形

与其他渐变相同，CSS径向渐变不属于CSS

<color>

数据类型，而是一个不固定尺寸的图片。

（先不展开了……）

重复渐变

上述的linear-gradient和radial-gradient都不允许重复渐变。若需要重复渐变，可以使用repeating-linear-gradient 和 repeating-radial-gradient。

重复线性渐变

基本语法与上面的线性渐变类似，就是增加了重复的特性。

重复的规则简单说就是用最后一个颜色断点的位置减去第一个颜色断点位置的距离作为区间长度，不断的重复。

比如repeating-linear-gradient(red 10px, blue 50px) 就相当于linear-gradient(…, red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, …)



利用颜色锐变和重复渐变可以写出丰富的效果：

background: repeating-linear-gradient(-45deg,red,red 10px, white 10px,white 20px)