1. attr()

Used to select the attribute value of an element, usage: attr(attribute name of an HTML element), normally used with CSS content

html:
    
<p><a href="http://a.b.c" name="attr"> 10 < / a > < / p ><p><a href="http://d.f.e" name="Who am I?"> 9 < / a > < / p >
css:  a:after{content:'('attr(href) '/' attr(name) ') '}   Results: Ten (http://a.b.c/attr)Nine (http://d.f.e/Who AM I)Copy the code

2. calc()

Calc for dynamically calculating the length value (mathematical expression)

- Operators must be preceded by Spaces- Any length can be calculated with calC- calc () support'+'.The '-'.The '*'.'/'Such as operation- calc() uses the standard mathematical precedence rule
/ / syntax: width: calc(70% - 60px) height: calc(70% / 2 * 12 + 66px) Copy the code

3. linear-gradient()

Used to create a linear gradient image, need to set a starting point, a direction, can also define the Angle starting color, etc.

/ / syntax:
background: linear-gradient(direction, color-stop1, color-stop2, ...) ;
Direction: Specifies the Angle of the gradient direction (can be omitted)Color-stop1: Specifies the start and stop colors of the gradientCopy the code
Example:

background: linear-gradient(red,yellow,blue,green);

The result is that the gradient Angle is top-down without setting it


Example:

background: linear-gradient(12deg,red,yellow,blue,green);

The result is as follows, after setting the gradient Angle


Example:

background: linear-gradient(to left top,red,yellow,blue,green);

The result is that the gradient Angle can go from one direction to the other


4. radial-gradient()

The use is similar to linear-gradient(), except that it creates the image with a radial gradient defined by the center point, and two terminating colors must be set.

Grammar:
background: radial-gradient(shape size at position, start-color, ... , last-color);
Shape: Determine the type of the circle (optional) - ellispe(default): Specifies the radial gradient of the ellipse- circle: specifies the radial gradient of a circle Size: Specifies the size of the radial gradient (optional) - apaps-corner (default) : Specifies the radius of the radial gradient as the Angle from the center to the farthest from the center of the circle- Closest side: Specifies the length of the radial gradient radius from the center to the closest side of the circle- Closest -corner: Specifies the radius of the radial gradient as the Angle closest to the center- apapel-side: specifies that the radius of the radial gradient is from the center of the circle to the farthest side from the center Position: Defines the position of the gradient (optional) - center(default) : sets the ordinate value of the radial gradient center- top: Sets the top to the vertical coordinate of the radial gradient center- bottom: Sets the bottom to the vertical value of the radial gradient center start-color, ... , last-color: Defines the start and end colors of the gradientCopy the code
Example:

background: radial-gradient(red, green, blue, yellow);

The result is that the gradient spreads out from the center


Example:

background: radial-gradient( red 5%, green 10%, blue 15%,yellow 20%);

The result is that you can set the proportion of each color individually


Example:

background: radial-gradient(circle, red, green, blue, yellow);

The result is as follows, with the radial gradient set to a circle and the default to an oval


5. repeating-linear-gradient()

Create a repeated linear gradient image

Grammar:
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...) ;
Angle: Defines the gradient Angle (0deg-360deg, default 180deg) Side-or-corner: specify the starting position of linear gradient (order optional) - Key word one: horizontal position (left,right)- The vertical position (top,bottom) color-stop1, color-stop2,...  - Specifies the start and end colors of the gradient, consisting of the color value and the stop position (optionally, specified using a percentage)Copy the code
Example:

background: repeating-linear-gradient(red, yellow 10%, green 20%);

The result is as follows, default top down, and set color ratio


Example:

background: repeating-linear-gradient(30deg, red 5%, yellow 10%, green 20%);

The result is as follows, after setting Angle


This article is formatted using MDNICE