#今日说码栏目#第十集

关于CSS样式的渐变色的使用

(一开始，我以为CSS的渐变色只有两种颜色的渐变色，还有三色、多色渐变，知道我看了一些博主的文章，发现渐变色有很多使用方式)

1、线性渐变色（向下/向上/向左/向右/对角线）

向下效果如图所示(从上到下)：

语法：
background-image: linear-gradient(to bottom , rgb(204, 100, 241),rgb(252, 252, 252));
其中to后面跟的是渐变延伸的方向，当空着不写时，默认是从上到下渐变。
to后面的可选值为： bottom 、top 、left 、right

向上效果如图所示(从下到上)： 

background-image: linear-gradient(to top, rgb(204, 100, 241),rgb(252, 252, 252));

 

向左效果如图所示(从右向左)：

background-image: linear-gradient(to left, rgb(204, 100, 241),rgb(252, 252, 252));

向右效果如图所示(从左向右)：

background-image: linear-gradient(to right, rgb(204, 100, 241),rgb(252, 252, 252));

 对角线：向右下角效果如图所示(从左上向右下)：

background-image: linear-gradient(to bottom right, rgb(44, 150, 237),rgb(233, 208, 19));

多色渐变

2、径向渐变色

①径向渐变-不同间距的色标

.jianbian {
				width: 500px;
				height: 100px;
				background-image: radial-gradient(rgb(42, 27, 184)5%,rgb(218, 189, 202)15%,rgb(240, 221, 12)50%);
			}

②径向渐变-均匀间隔的色标（默认） 

	.jianbian {
				width: 500px;
				height: 100px;
				background-image: radial-gradient(rgb(42, 27, 184),rgb(218, 189, 202),rgb(240, 221, 12));
			}

③设置形状:shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）

.jianbian {
				width: 500px;
				height: 100px;
				background-image: radial-gradient(circle, rgb(42, 27, 184),rgb(218, 189, 202),rgb(240, 221, 12));
			}

④ closest-side

	.jianbian {
				width: 500px;
				height: 100px;
				background-image: radial-gradient(closest-side at 66% 55%, rgb(42, 27, 184),rgb(218, 189, 202),rgb(240, 221, 12));
			}

⑤ farthest-side

	.jianbian {
				width: 500px;
				height: 100px;
				background-image: radial-gradient(farthest-side at 66% 55%, rgb(42, 27, 184),rgb(218, 189, 202),rgb(240, 221, 12));
			}

⑥closest-corner

	.jianbian {
				width: 500px;
				height: 100px;
				background-image: radial-gradient(closest-corner at 66% 55%, rgb(42, 27, 184),rgb(218, 189, 202),rgb(240, 221, 12));
			}

⑦farthest-corner

	.jianbian {
				width: 500px;
				height: 100px;
				background-image: radial-gradient(farthest-corner at 66% 55%, rgb(42, 27, 184),rgb(218, 189, 202),rgb(240, 221, 12));
			}

彩虹色(代码如下)：

.jianbian {
				width: 480px;
				height: 270px;
				background:linear-gradient(45deg,#ff0000 0%,#ff0000 11%,

#ffb600 11%,#ffb600 22%,

#fff600 22%,#fff600 33%,

#a5ff00 33%,#a5ff00 44%,

#00a9ff 44%,#00a9ff 55%,

#0400ff 55%,#0400ff 66%,

#8a00fc 66%,#8a00fc 77%,

#ff00e9 77%,#ff00e9 88%,

#ffbf00 88%,#f8dc04 100%);
			}

效果如下：