1月 25 2016

CSS3特性——渐变

CSS3新特性：渐变（Gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）: 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）: 由它们的中心定义

线性渐变

background-image: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop> ]+ );

<angle>: 角度（Degree），单位deg（读作‘度’），一个圆共360度，90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
在transform中rotate的deg表示顺指针旋转角度，而渐变中的deg指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
<side-or-corner>: to [left | right] || [top | bottom]
表示以下组合left, right, top, bottom, left top, left bottom, right top, right bottom.
注意：如果webkit浏览器不加to，会现实异常
<color-stop>: <color> [ <percentage> | <length> ]
颜色值+空格+百分比或长度值。例如：red 100px。表示渐变的长度

使用方向控制

background: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变——从上到下（默认）

#exp1 {
    background-image: linear-gradient(red, yellow);
}

线性渐变——从左到右

#exp2 {
    background-image: linear-gradient(to right, red, yellow);
}

线性渐变——从左上到右下（默认）

#exp3 {
    background-image: linear-gradient(to bottom right, red, yellow);
}

使用角度控制

background: linear-gradient(angle, color-stop1, color-stop2, ...);

线性渐变——通过控制角度，实现从左上到右下

#exp4 {
    background-image: linear-gradient(135deg, red, yellow);
}

可见光谱

#exp5 {
    height: 100px;
    width: 100%;
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

重复的线性渐变

#exp6 {
    background-image: repeating-linear-gradient(red, yellow 10%);
}

径向渐变

background-image: radial-gradient([[ <shape> || <size> ] [ at <position> ]?, | at <position>, ]? <color-stop> [, <color-stop> ]+);

<shape>

主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”

circle: 如果<size>和<length>大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变
ellipse: 如果<size>和<length>大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。

<size>

主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词

closest-side: 指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner: 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side: 指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner: 指定径向渐变的半径长度为从圆心到离圆心最远的角

<position>

主要用来定义径向渐变的圆心位置（浏览器的坐标定义方式，都是以左上角为圆点，横坐标纵坐标分别向右向下递增）。此值类似于CSS中background-position属性，用于确定元素渐变的中心位置。如果这个参数省略了，其默认值为“center”。

<length>: 用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
<percentage>: 用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left: 设置左边为径向渐变圆心的横坐标值。
center: 设置中间为径向渐变圆心的横坐标值或纵坐标。
right: 设置右边为径向渐变圆心的横坐标值。
top: 设置顶部为径向渐变圆心的纵标值。
bottom: 设置底部为径向渐变圆心的纵标值。

实例1——最简单参数，长宽半径根据容器变化

#exp7 {
    background-image: radial-gradient(red, yellow);
}

实例2——指定形状

#exp8 {
    background-image: radial-gradient(circle, red, yellow);
}

实例3——用数值代替circle

#exp9 {
    background-image: radial-gradient(50px, red, yellow);
}

实例4——增加position

#exp10 {
    background-image: radial-gradient(50px at 50px 50px, red, yellow);
}

实例5——展示5种预定义位置

left, right, top, bottom, center

实力6——展示4中预定义大小

#exp16 {
    background-image: radial-gradient(closest-side at 150px 50px, red, yellow);
}

#exp17 {
    background-image: radial-gradient(closest-corner at 150px 50px, red, yellow);
}

#exp18 {
    background-image: radial-gradient(farthest-side at 150px 50px, red, yellow);
}

#exp19 {
    background-image: radial-gradient(farthest-corner at 150px 50px, red, yellow);
}

* 想象一下，如果第一张图的position设为right，则背景会是一片白色
** 注意，size是有两个值的，上例中都用了一个值，所以长宽半径都遵循相同的规律

重复径向渐变

#exp20 {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background-image: repeating-radial-gradient(red, yellow 20px);
}

实例：利用线性重复渐变绘制草稿纸

草稿纸

Raphael Wang

三生万物