热搜： Python 编程 PHP vue dedecms

首页> 前端开发 > Css3 > 正文

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

发布时间：2022-12-31 21:03:45 来源：网络

.

春季是一个富有生命力季节，也是一个美丽、神奇，充满希望季节。都说春季是花海洋。粉色淡雅，白色端庄，红色热烈，紫色深情，泼泼洒洒，浓浓烈烈。一朵朵花，把春季朝气蓬勃都开出来了。

上午制作网页时，写了一个利用 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实现背景颜色渐变的方法