渐变样式设置

1.什么是渐变

渐变指定是多种颜色平缓变换的一种显示效果。

2.渐变的主要因素

1.色标：一种颜色及其出现的位置

2.一个渐变是由多个色标组成（至少两个）

3.渐变分类

1.线性渐变

以直线的方向来填充效果

2.径向渐变

以圆形的方式来实现填充

3.重复渐变

将线性渐变或径向渐变 重复几次实现填充

4.渐变详解

1.线性渐变

属性：background-image

取值：linear-gradient(angle,color-point1,color-point2,....);

1.angle

表示渐变填充的方向或角度

取值：

1.关键字

to top 从下向上填充渐变色

to bottom 从上向下填充渐变色

to left 从右向左填充渐变色

to right 从左向右填充渐变色

2.角度值

0deg 从下向上填充，等同于to top

90deg 从左向右填充，等同于to right

180deg 从上到下填充，等同于to bottom

270deg 从右向左填充，等同于to left

2.color-point

色标：颜色 及其 位置

取值：颜色 以及 位置的组合，中间用空格分开

ex:

1.red 0%

在填充方向的开始位置处颜色为红色

2.green 50%

到填充方向一半的位置处，颜色变为绿色

3.blue 200px

到填充方向的200px的位置处，颜色变为蓝色

2.径向渐变

属性：

background-image:radial-gradient([size at position],

color-point1,...);

size at position:

size:半径，以px为单位的数值

position:圆心所在位置

1.x y 具体数值

2.x% y% 元素宽和高的占比

3.关键字

x:left,center,right

y:top,bottom

ex：

100px at right top

半径     右上角位置

3.重复渐变

1.重复线性渐变

background-image:repeating-linear-gradient

(angle,...);

color-point:位置一定要给绝对数值（px）,不要用相对单位%

2.重复径向渐变

background-image:repeating-radial-gradient

([size at position],...);

本文链接：https://www.weguiding.com/zhishi/193.html