Gradient
linear-gradientlinear gradient
linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+)
where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?
CThe center point of the point gradient container Ais the angle between Cthe vertical line passing through the point and Cthe gradient line passing through the point. This angle is called the gradient angle.
This angle can be defined in two ways:
- Use keywords:
to top,to bottom,to left,to right,to top right,to top left,to bottom rightandto bottom left - Use unit numbers to define angles, such as
45deg,1turnetc.
If the setting of the angle value is omitted, the default is to bottom(corresponding to 180degor .5turn):
background-image: linear-gradient(white, red);
Another important thing about using the corner keyword is that it depends on the size of the gradient container, such as to top right(or other corner keywords).
If you want a gradient redto blue, the direction is to the element top right. Logically, bluea straight line should form around the upper right corner of the element, and the purple gradient in the middle, from the upper left corner to the lower right corner. As shown below:
background-image: linear-gradient(to top right, red, blue);
If you want to make your browser work more, why can't you specify the position of the colors sequentially on the gradient line? The fact that the color point positions are in accordance with your expected instructions does not prevent you from operating in a non-sequential order. But if the later value is smaller than the previous value, the browser will automatically make corresponding corrections. for example:
background-image: linear-gradient(80deg, red 30%, orange 10%, yellow 60%, blue 40%);
Let's start with the first color red, which is positioned at the position of the gradient line 30%, and the second color orangeat 10%the position, but this is wrong, as said above, the stopping point of the color is an increment. At this time, the browser will correct the position of the second color, which will be the same as the position of the previous color and will also be distributed at the 30%position of the gradient line. Then the third color yellowis distributed at the position of the gradient line 60%, but the fourth color immediately after it is blue, 40%the browser will also correct and set its position to be the same as the previous color position.
background-image: linear-gradient(80deg, red 30%, orange, blue 10%);
Last but not least, in the example above, the last color blueis not in the correct position, so the browser will correct it to the same position as the previous one, in which case it is not the color adjacent to it yellow, nor the Yes orange, it goes back to the first color redposition. Therefore, redboth the blueand are distributed at the gradient line 30%, so both the yellowand orangecolors will not be visible.
repeating-linear-gradient Repeating linear gradient
The CSS function repeating-linear-gradient() creates an image consisting of a repeating linear gradient. This is a similar linear-gradientfunction and takes the same parameters, but it repeats the gradient in all directions to cover its entire container.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
display: block;
width: 50%;
height: 80px;
border-color: #000000;
padding: 10px;
}
#grad1 {
background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
}
#grad2 {
background-color: black;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
}
</style>
</head>
<body>
<ol>
<li>repeating gradient
<div id="grad1"></div>
</li>
<li>Zebra pattern
<div id="grad2"></div>
</li>
</ol>
</body>
</html>
radial-gradient radial gradient
radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{
2}] [ at <position> ]? ,
| [ [ circle | ellipse ] ||<extent-keyword> ] [ at <position> ]? ,
| at <position> , <color-stop> [ , <color-stop> ]+)
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
<color-stop> = <color> [ <percentage> | <length> ]?
The radial gradient of CSS3 is much more complicated than the linear gradient, and the attribute parameters are also numerous and complex. The attribute parameters in CSS3 radial variable syntax are defined as follows:
<position>: Mainly used to define the center position of the radial gradient. This value is similar to the property in CSS background-positionand is used to determine the center position of the element's gradient. If this parameter is omitted, its default value is "center". Its values mainly include the following:
<length>: Use the length value to specify the abscissa or ordinate of the center of the radial gradient circle. Can be negative.<percentage>: Use percentage to specify the abscissa or ordinate of the center of the radial gradient circle. Can be negative.left: Set the abscissa value of the center of the radial gradient circle on the left.center: Set the abscissa value or ordinate of the center of the radial gradient circle in the middle.right: Set the abscissa value of the center of the radial gradient circle on the right.top: Set the ordinate value whose top is the center of the radial gradient circle.bottom: Set the ordinate value whose bottom is the center of the radial gradient circle.
<shape>: Mainly used to define the shape of radial gradient. It mainly includes two values "circle" and "ellipse":
circle: If equal<size>to<length>the size, then the radial gradient is a circle, which is used to specify the radial gradient of the circle.ellipse: If<size>and<length>are not equal in size, then the radial gradient is an ellipse, which is used to specify an elliptical radial gradient.
<size>: Mainly used to determine the end shape size of the radial gradient. If omitted, its default value is "farthest-corner". Some keywords can be explicitly set for it, mainly including:
closest-side: Specify the radius length of the radial gradient from the center of the circle to the side closest to the center of the circle;closest-corner: Specify the radius length of the radial gradient from the center of the circle to the angle closest to the center of the circle;farthest-side: Specify the radius length of the radial gradient from the center of the circle to the side farthest from the center of the circle;farthest-corner: Specify the radius length of the radial gradient from the center of the circle to the farthest angle from the center of the circle;
May be set explicitly if <shape>set to "circle" or omitted . It means that the length value is used to specify the horizontal or vertical diameter length of the radial gradient, and the shape of the radial gradient is determined to be a circle or an ellipse based on the horizontal and vertical diameters. This value cannot be negative.<size><length>
May be set explicitly if <shape>"ellipse" is set or omitted . Mainly used to set the size of the ellipse. The first value represents the horizontal radius of the ellipse, and the second value represents the vertical radius. These two values can be used to define the two radius sizes in addition to the defined size. The value defined using is relative to the dimensions of the radial gradient container. Also cannot be negative.<size>［<length>|<percentage>］<length><percentage><percentage>
<color-stop>: Stop color on the radial gradient line, similar to linear gradient <color-stop>. Radial gradient means the gradient line spreads from the center point to the right. 0% represents the starting point of the gradient line, and 100% represents the end position of the gradient line intersecting the gradient container. And its color stop can be defined with a negative value.
Although radial gradient is more complicated than linear gradient, as long as you understand its basic syntax and the role of related attribute parameters, I don’t think it will take too much time to adapt. Next, we will strengthen the use of radial gradients through actual combat. All the examples below are implemented in a container with a width of 400 pixels and a height of 300 pixels.
Let's first look at the simplest radial gradient. The center of the circle is in the middle of the container, from the color "hsla(120,70%,60%,.9)" to the color "hsla(360,60%,60%,.9)" "Color implements radial gradient:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(rgb(220, 75, 200),rgb(0, 0, 75));
}
If you want to make a circular gradient instead of an elliptical gradient, you only need to add a keyword "circle". We add a keyword "circle" based on the previous example:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(circle,rgb(220, 75, 200),rgb(0, 0, 75));
}
A circular gradient is a special elliptical gradient where the horizontal and vertical radii have the same length value.
Since circular gradients are a special case of elliptical gradients, if our gradient's primary radius (horizontal radius) and secondary radius (vertical radius) are different, it will be an elliptical gradient.
As mentioned above, when the major radius and the minor radius are not equal, the radial gradient produced is an elliptical gradient. When making an elliptical gradient, you can use the keyword "ellipse":
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(ellipse,rgb(220, 75, 200),rgb(0, 0, 75));
}
In addition to using keywords to create different radial gradients, you can also use different gradient parameters to create radial gradient effects. The shape of the radial gradient is determined by making concentric circles, major radius and minor radius. For example, the center position of the circle is at "200px, 150px", the main radius is 50px, the secondary radius is 150px, and the color is from "rgb(220, 75, 200)" to "rgb(0, 0, 75)". Gradient:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(50px 150px at 200px 150px,rgb(220, 75, 200),rgb(0, 0, 75));
}
Next, let’s take a look at the gradient effect achieved when the center of the circle is the same and the inner and outer radii are the same size:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(200px 200px at 200px 150px,rgb(220, 75, 200),rgb(0, 0, 75));
}
In the example below, we define the center of the circle at "at 50% 75%", demonstrating that "closest-side", "closest-corner", "farthest-side" and "farthest-corner" are respectively in the circle. Effect with elliptical radial gradient.
/* closest-side*/
.closest-side .circle {
background-image: radial-gradient(closest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.closest-side .ellipse {
background-image: radial-gradient(closest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* closest-corner*/
.closest-corner .circle {
background-image: radial-gradient(closest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.closest-corner .ellipse {
background-image: radial-gradient(closest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* farthest-side */
.farthest-side .circle {
background-image: radial-gradient(farthest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.farthest-side .ellipse {
background-image: radial-gradient(farthest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* farthest-corner */
.farthest-corner .circle {
background-image: radial-gradient(farthest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.farthest-corner .ellipse {
background-image: radial-gradient(farthest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
repeating-radial-gradient Repeating radial gradient
The CSS function repeating-radial-gradient() creates a graphic consisting of repeating gradients radiating from the origin. It is similar to radial-gradientand takes the same parameters, but it repeats the color in all directions, covering its entire container.
div {
width: 400px;
height: 300px;
margin: 20px auto;
background-image: repeating-radial-gradient(red,green 40px, orange 80px);
}
conic-gradient cone gradient
{
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(red, orange, yellow, green, teal, blue, purple);
}
{
width: 200px;
height: 200px;
background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);
border: 1px solid #000;
}
Color
color
Property description: Set or get the text color of the object
Version change: No
Grammar template:
color：<color>
Default:user agent determined by
Property value description:
<color>：指定颜色;
Applicable elements: all elements
Is it inheritable: Yes
Is it animated: Yes
Script interface: color
Precautions:
- You can use
Color Name(color name),HEX,RGB,RGBA,HSL,HSLA,transparentto specifycolor - Specifying color names
colormay not be accepted by some browsers
opacity@3
Property description: Set or get the opacity of the object
Grammar template:
opacity：<number>
default value:
Property value description:
<number>：使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值;
Applicable elements: all elements
Is it inheritable: No
Is it animated: Yes
Script interface: opacity
Note: If the element defines a value less than 1 1, opacitya local stacking context will be generated.
transparent color
background: transparent;