Chapter 9: Gradient Color
1. Linear gradient
1.1.What is a linear gradient?
Linear gradient, as the name suggests, is a gradient starting from a straight line edge and along a certain direction.
The attribute is background, which gives the gradient color of the background.
- The attribute value is linear-gradient(), which is a function. The color that needs to be gradient is written in ();
- To create a linear gradient, you need to specify two or more colors to make a smooth transition to form a gradient color. It can achieve gradients from different directions and angles, and can also be used for repeated gradients.
- If no direction is specified, half of the gradient starts from top to bottom by default.
1.2 How to write linear gradient
- Basic writing method
: When the percentage is not written, the gradient colors will be evenly distributed by default.
For example:
background: linear-gradient(red, green, blue);
from top to bottom by default, starting from red, gradient to green, and then ending with blue, the three colors are evenly distributed.
- Control the gradient ratio of different colors through percentages
- For example:
background: linear-gradient(red 0%, green 100%);
start from 0% and use red gradient
0~100%: transition from red to green
and finally 100% to green at the end
Special: Gradient layer by layer
background: linear-gradient(red 50%, blue 50%);
It means half is red and half is blue.
In fact, it is equivalent tobackground: linear-gradient(red 0%,red 50%, blue 50%,blue 100%);
starting from 0%, going to 50% to be red, starting from 50% to 100% being blue.
- Use to to control the gradient direction
For example:
background: linear-gradient(to top, red, green);
to top means from bottom to top, starting from red and ending with green.
- Use deg to represent the angle to control the gradient direction
because the default direction is from top to bottom. For example, 45 degrees can be understood as starting the gradient by rotating the top edge 45 degrees clockwise.
For example:
background: linear-gradient(45deg, pink 40%, purple 60%);
start with the top edge rotating 45 degrees clockwise, starting with pink, and finally ending with pink.
- The repeating-linear-gradient() function is used to create a repeating linear gradient background
- For example:
background: repeating-linear-gradient(45deg, aqua 0px, aqua 20px, blue 20px, blue 40px);
rotate 45 degrees, start with light green, 20px part of light green, 20px part of blue, repeat- For example:
background: repeating-linear-gradient(red, yellow 10%, green 20%);
it starts from red, gradually changes to yellow when it reaches 10%, then gradually changes to green when it reaches 20%, and so on.
- Use rgba values to represent gradient colors with transparency
. To add transparency, we use the rgba() function to define a color node. The last parameter in the rgba() function can be a value from 0 to 1, which defines the transparency of the color: 0 means completely transparent, 1 means completely opaque
like:
background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>线性渐变</title>
<style>
.one>div,
.two>div,
.three>div {
display: inline-block;
width: 200px;
height: 250px;
}
/* 线性渐变写法： */
/* 1.基础写法
最少要写两种及以上的颜色 ,默认是从上到下开始渐变，平均分配渐变颜色*/
.one>.div1 {
/* 默认从上到下，默认从红色开始，渐变到绿色，再以蓝色结束，三者颜色，平均分配 */
background: linear-gradient(red, green, blue);
}
.one>.div2 {
background: linear-gradient(red, pink, green, blue, yellow,
purple);
}
/* 2.通过百分比控制不同颜色的渐变比例 */
.one>.div3 {
background: linear-gradient(red 0%, green 100%);
/*
一开始从0%开始用红色渐变
0~100%: 过渡从红色 变成绿色
最后100%刷绿色 结尾
*/
}
.one>.div4 {
/* 一半是红色 一半蓝色 */
background: linear-gradient(red 50%, blue 50%);
}
.one>.div5 {
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background: linear-gradient(blue, green 40%, red);
}
.one>.div6 {
background: linear-gradient(red 0%, red 33%, yellow 33%, yellow 66%, blue 66%, blue 100%);
/* 用刷油漆来打比喻：
0~20: 红色油漆
0% 开始刷红色油漆
20: 红色油漆停止刷
20~50: 黄色油漆
20:开始刷黄色
50: 停止刷黄色
以此类推后面 蓝色
*/
}
/* 3.通过to来控制渐变方向 */
.two>.div1 {
/* 原本渐变色 默认都是从上到下的方向开始渐变*/
background: linear-gradient(red, yellow, green);
}
.two>.div2 {
/* to top 表示从下向上，由红色开始渐变，绿色结束 */
background: linear-gradient(to top, red, green);
}
.two>.div3 {
/* 表示从左上到右下，由红色开始渐变，绿色结束 */
background: linear-gradient(to right bottom, red, green);
}
/* 4.通过deg表示角度来控制渐变方向
因为默认方向为上到下，如45度可以理解为以最上面的边按照顺时针方向旋转45度开始渐变 */
.two>.div4 {
/* 以最上面的边按照顺时针方向旋转45度开始，粉色开始，最后以粉色结束渐变*/
background: linear-gradient(45deg, pink 40%, purple 60%);
}
.two>.div5 {
/* 旋转90度)*/
background: linear-gradient(90deg, pink 40%, purple 60%);
}
/* 5.repeating-linear-gradient() 函数用于创建重复的线性渐变背景。 */
.three>.div1 {
/* 旋转45度，以浅绿色开始，20px部分的浅绿色，20px部分的蓝色，如此重复 */
background: repeating-linear-gradient(45deg, aqua 0px, aqua 20px, blue 20px, blue 40px);
}
.three>.div2{
/* 由红色开始渐变，到10%时，渐变成黄色，再到20％时渐变到绿色，如此重复 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
/* 6. 通过rgba值，用透明度来表示渐变色 */
.three>.div3 {
/* 为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。 */
background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
</style>
</head>
<body>
<div class="one">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</div>
<div class="two">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</div>
<div class="three">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
Rendering:
2. Radial Gradient
A radial gradient is a gradient that gradually spreads outward from the center of a circle, just like the growth rings of a tree, spreading outward in circles.
2.1 What is a radial gradient?
- The attribute value is: radial-gradient() function, in () write the color that needs to be gradient;
- Creating a radial gradient is also a gradient formed by two or more colors. You can control the position and shape of the center of the circle to achieve a radial gradient.
- By default, the center of the radial gradient is at the center of the box, and the center of the circle is elliptical by default.
2.2 How to write radial gradient
- Basic writing method
: When the percentage is not written, the gradient colors will be evenly distributed by default.
For example:
background: radial-gradient(red, green, blue);
starting from the center of the box, red to green and then blue, the three colors are assigned gradients by default.
- Control the gradient ratio of different colors through percentages
For example:
background: radial-gradient(red 30%, green 70%);
starting from the center, 0% to 30% is red, 30% to 70% is the gradient from red to green, and 70% to 100% is green.
Special: There is a red circle in the middle, and the remaining part is green.
For example: background: radial-gradient(red 50%, green 50%);
In fact, it is equivalent tobackground: radial-gradient(red 0%,red 50%,green 50% ,green 100%);
- The direction of the center of the circle is controlled by at.
The default position of the center of the circle is at the center of the box. The direction of the center of the circle can be controlled by at.
For example:
background: radial-gradient(at 100px 100px, red 0%, red 20%, green 20%, green 40%);
at is the value after controlling the direction of the center of the circle. The first value represents the horizontal (left and right) direction. The second value: the vertical (up and down) direction, which is equivalent to the coordinate position of a plane rectangular coordinate system indicating the position of the center of the circle.
- Controlling the shape of the center of the circle
The shape of the center of the circle is elliptical by default. You can specify the shape of the center of the circle by giving a specific value.
- Circle center shape: The default is ellipse Circle: circle
- You can write circle directly to indicate that the shape of the center of the circle is a circle, and write ellipse or leave it blank to indicate that the shape of the center of the circle is an ellipse.
like:background: radial-gradient(circle at 100px 100px, red 0%, red 20%, green 20%, green 40%);- The shape of the center of the circle can be expressed through specific pixel values.
For example:background: radial-gradient(200px 200px at 100px 100px, red 0%, red 20%, green 20%, green 40%);
the first two pixel values indicate that the width and height of the center of the circle are both 200px, indicating that it is the center of a circle. The two pixel values after at represent the position of the center of the circle, as mentioned above.
<style>
div {
display: inline-block;
width: 200px;
height: 200px;
}
/* radial-gradient():径向渐变
默认在盒子正中心开始渐变，颜色自己平均分配由内向外渐变 */
.div1 {
/* 默认由盒子中心开始，红色到绿色再到蓝色，三种颜色默认分配渐变 */
background: radial-gradient(red, green, blue);
}
.div2 {
/* 中间是一个红色的圆，然后剩余部分是绿色 */
background: radial-gradient(red 50%, green 50%);
/* 其实就是相当于是 background: radial-gradient(red 0%,red 50%,green 50% ,green 100%); */
}
.div3 {
/* 由中心开始，0%到30%是红色，30%到70%是红色渐变到绿色的渐变，70%到100%是绿色 */
background: radial-gradient(red 30%, green 70%);
}
.div4 {
/* at是控制圆心方向 后面那个值 第一个表示 水平(左右) 第二值: 垂直(上下)方向*/
background: radial-gradient(at 100px 100px, red 0%, red 20%, green 20%, green 40%);
}
.div5 {
/* 圆心形状:默认是椭圆 ellipse 圆:circle */
background: radial-gradient(200px 200px at 100px 100px, red 0%, red 20%, green 20%, green 40%);
/* 200px 圆心宽度 200高度 这两个值是用来控制圆心的形状的，如果这两个值没写默认是椭圆的圆心*/
}
.div6 {
/* 圆心形状:默认是椭圆 为了更好的观察，把这个盒子设置宽高不一样 因为如果是正方形就看不出来 */
width: 200px;
height: 300px;
/* 此处at前面没有写值，没写默认是椭圆形状的圆心*/
background: radial-gradient(at 100px 100px, red 0%, red 20%, green 20%, green 40%);
}
.div7 {
width: 200px;
height: 300px;
/* 此处at前面，指定圆心的形状*/
background: radial-gradient(circle at 100px 100px, red 0%, red 20%, green 20%, green 40%);
/* 可以通过circle表示圆， ellipse表示椭圆，或者用具体的两个数值来表示圆心的形状
如： background: radial-gradient(200px 200px at 100px 100px,red 0%,red 20%,green 20%,green 40%);
200px： 圆心宽度 200px：圆心高度 这两个值是用来控制圆心的形状的，如果这两个值没写默认是椭圆的圆心*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
</body>
Rendering:
Summarize
The above is the linear gradient and radial gradient compiled by the editor. They are both of the same gender and opposite gender. I gave a more detailed explanation of the meaning and expression method of the two gradients and related cases. Linear gradients and radial gradients are not actually used in many places. Just understand them, and there is no need to go into details. It was compiled with reference to various sources and my own understanding. If there may be inaccuracies and omissions, I hope you guys can enlighten me and make corrections. I would like to thank you in advance.