渐变背景
原文链接:https://blog.csdn.net/Mq_sir/article/details/121053167
一、线性渐变(向上\下\左\右,左上,右上等等)
通过属性Inear-gradient来定义一个线性渐变
1、to+方向
background-image:linear-gradient(方向\角度,颜色1,颜色2,颜色3);
方向:在关键字to后面加上top、bottom、right、left中的一个或者多个关键字
.c1{
/*默认从上往下渐变*/
background-image:linear-gradient(#ff0000,#fff200);
}
.c2{
/*可以自己设置渐变方向:to 方向 从下往上渐变*/
background-image:linear-gradient(to top,#ff0000,#fff200);
}
.c3{
/*可以使用多个方向,例如to right bottom,表示从左上到右下*/
background-image:linear-gradient(to right bottom,#ff0000,#fff200);
}
.c5{
/*颜色也可以使用rgba,这样就可以调整透明度*/
background-image: linear-gradient(rgba(0,0,0,0.5),white);
}
2、使用角度来定义方向
使用角度取代预定义的方向,值0deg等于向上(to top)。值90deg等于向右(to right),值180deg等于向下(to bottom)
我们填的是终点的角度,起点为对角线的角度
![](/i/ll/?i=c61cf83e3fc14700ac7b9ad616369418.png?,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5rWq5ryr5Li75LmJ56CB5Yac,size_20,color_FFFFFF,t_70,g_se,x_16)
.c4{
/*表示起点从300度到60度渐变*/
background-image: linear-gradient(60deg,#ff0000,#fff200,#1e9600);
}
3、平铺的线性渐变
repeating-linear-gradient()函数用于重复线性渐变
.c6{
/*从左下角开始绘制渐变,前20px是绿色,再30px渐变到红色,最后40px渐变到黄色,浏览器会自动补充剩下的背景*/
background-image: repeating-linear-gradient(45deg,#1e9600 20px,#ff0000 30px,#fff200 40px);
}
![](/i/ll/?i=50a4d5219f544dc98f3229ee32615b48.png?,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5rWq5ryr5Li75LmJ56CB5Yac,size_20,color_FFFFFF,t_70,g_se,x_16)
二、径向渐变(由中心定义)
径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。有一种水波扩散的感觉。
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape 为椭圆形,size 为最远角,position 为中心。
shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse(椭圆)。
size 参数定义渐变的大小。它可接受四个值:
closest-side :从中心点向外扩展渐变,到离中心点最近的一边结束。
farthest-side :以离渐变中心点最远的那一边计算圆的半径
closest-corner :以离渐变中心点最近的元素顶角计算渐变的范围。
farthest-corner :以离渐变中心点最远的顶角计算圆的半径
1、均匀间隔的色标(默认)
默认是椭圆形
.c7{
background-image: radial-gradient(#ff0000,#fff200);
}
可以设置圆形
background-image: radial-gradient(circle, red, yellow, green);
2、设置径向渐变的中心点
用关键字 at 后面加上 position 属性支持的定位关键字和数值,指定渐变中心的位置。
background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
把中心点设置在元素的距离左上角(60% 55%)。并以 以离渐变中心点最远的顶角计算圆的半径。
3、平铺的径向渐变
background-image: repeating-radial-gradient(circle at 20% 40%,#eea2a2 20px, #57c6e1 20px, #b49fda 40px, #7ac5d8 40px, #b49fda 60px, #4F9C9C 60px, #57c6e1 80px, #99CCCC 80px, #eea2a2 100px);
好用的渐变网站
https://webkul.github.io/coolhue/
https://uigradients.com/#Lunada
标签:background,gradient,image,中心点,渐变,linear From: https://www.cnblogs.com/liuhousheng/p/16749889.html