上午制作网页时，写了一个利用 CSS3 实现网页背景颜色渐变的效果，晚上整理代理时，发现这效果还挺好玩的。记录下来，以后再写这种网页背景颜色渐变的效果时，只能复制就行了。

网页背景颜色的渐变，利用了 CSS3 中的 Gradients 属性，下面飞鸟慕鱼就来详细的说一说哦。

CSS3 的渐变效果有两种，分别为：Linear Gradients(线性渐变) 和 Radial Gradients(径向渐变)。

CSS3 linear-gradient定义和用法

Linear Gradients 定义：用线性渐变创建一个背景图像

语法：

background-image: linear-gradient(point,color1,color2,.....);

参数：

point：(可选)为渐变的坐标值，如省略则默认从上到下渐变，

color：为颜色值，可以写入多个，如：red，#fff

1、CSS3 背景颜色四个方向的线性渐变

/**默认向下渐变*/
background-image: linear-gradient( red , yellow);
/**向上渐变*/
background-image: linear-gradient(to top ,red , yellow);
/**向右渐变*/
background-image: linear-gradient(to right ,red , yellow);
/**向左渐变*/
background-image: linear-gradient(to left ,red , yellow);

运行结果：

起始颜色为红包，结束颜色为黄色

2、CSS3 背景颜色对角渐变

CSS代码：

/**向右下角渐变*/
background-image: linear-gradient(to bottom right ,red , yellow);
/**向右上角渐变*/
background-image: linear-gradient(to top right ,red , yellow);
/**向左上角渐变*/
background-image: linear-gradient(to top left ,red , yellow);
/**向左下角渐变*/
background-image: linear-gradient(to bottom left ,red , yellow);

运行结果：

起始颜色为红包，结束颜色为黄色

3、CSS3 背景颜色，自定义角度渐变

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用使用上面给出的方向渐变或是对角渐变

角度是指水平线和渐变线之间的角度，逆时针方向计算，当然你可以参考下图和下面的示例：

示例CSS代码：

/**0 角度渐变*/
background-image: linear-gradient( 0deg,red , yellow);
/**15 度角渐变*/
background-image: linear-gradient( 45deg,red , yellow);
/**180 度角渐变*/
background-image: linear-gradient( 180deg,red , yellow);
/**-90 度角渐变*/
background-image: linear-gradient( -90deg,red , yellow);

运行结果：

4、CSS3 背景颜色重复渐变

CSS3 背景颜色重复渐变，需要使用 repeating-linear-gradient 值

CSS代码：

background-image: repeating-linear-gradient(red, yellow 10%, green 20%); 
background-image: repeating-linear-gradient(45deg ,red 20%, yellow 30%);

运行结果：

CSS3 Radial Gradients( 定义与用法

Radial Gradients：创建一个径向渐变的背景图片

语法：

background-image: radial-gradient(shape size position, color1,color2,color3...);

参数：

shape：定义形状，circle(圆形)，ellipse(椭圆)，

size：定义了渐变的大小

它的可选值如下：

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边

farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角

contain：包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side

cover：覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner

注：

使用背景颜色径向渐变时，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

CSS3 径向渐变示例

1、CSS3背景颜色径向渐变

CSS代码

/* 颜色均匀渐变的大小 */
background-image: radial-gradient(red, yellow, green);
/* 指定颜色区域大小 */
background-image: radial-gradient(red 10%, yellow 25%, green 60%);
/* 改变形状 */
background-image: radial-gradient(circle, red, yellow, green);
/* 指定渐变的大小 */
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);

2、CSS3 背景颜色重复径向渐变

CSS3 中的颜色重复径向渐变，需要用到 repeating-radial-gradient 属性

CSS代码：

/* 重复的径向渐变 */
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
/* 改变形状后的重复的径向渐变 */
background-image: repeating-radial-gradient(circle,red, yellow 20%, green 30%);

运行结果：

Tags：css 颜色

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。