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

网页背景颜色的渐变,利用了 CSS3 中的 Gradients 属性,而渐变的效果又分为了两种,分别为:Linear Gradients(线性渐变) 和 Radial Gradients(径向渐变)!

CSS3 linear-gradient定义和用法

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

语法:

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

参数:

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

color:为颜色值,可以写入多个,如:red,#fff

CSS3 背景颜色线性渐变示例

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

CSS代码:

/**默认向下渐变*/
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);

运行结果:

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

CSS3实现背景颜色渐变的方法

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);

运行结果:

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

CSS3实现背景颜色渐变的方法

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

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

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

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);

运行结果:

CSS3实现背景颜色渐变的方法

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实现背景颜色渐变的方法

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);

运行结果

CSS3实现背景颜色渐变的方法

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%);

运行结果:

CSS3实现背景颜色渐变的方法

PS:文章是边查阅资源,边写的,有不对的地方,还请在下方留言指正!