关于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%);
}
效果如下: