This is the 9th day of my participation in the August Wen Challenge.More challenges in August

The gradient effect of CSS is the property value of background-image, which includes three gradient methods:

  • linear-gradient(Linear gradient)
  • radial-gradient(Radial gradient)
  • conic-gradient(Angular gradient)

1. Linear-gradient

background-image: linear-gradient( [<angle> | to <corner>]? , <color-list>... )
Copy the code
  • angle: Gradient Angle (optional). The gradient direction is clockwise
  • corner: Gradient direction (optional), accepttop.bottom.left.right.left top.left bottom.top right.bottom rightEight kinds of value
  • color-list: Color block to gradient (multiple)

Such as:

 background: linear-gradient(135deg.#2b5876.#4e4376);    /* Gradient Angle 135deg, gradient #2b5876 - #4e4376 */
Copy the code

Results obtained:

If the water Angle is not set, the default value is to bottom, that is, the same effect as 180deg

A gradient color block, color-item, can be divided into three parts

  • color: Color of the current position
  • percentage: Percentage of the current color in the gradient (optional)
  • length: Length of current color in gradient (optional)

Such as:

Can make some really nice effects

There is also a linear gradient that can be repeated:

background-image: repeating-linear-gradient(45deg, red, blue);
Copy the code

Repeated linear gradients are possible

2. Radial gradient

background-image: radial-gradient(shape size at position, color-list...) ;Copy the code
  • shape: Determine the type of circle, divided intoellipse(Default) oval andcirclecircular
  • size: Gradient size, which may be:
    • arthest-corner: By default, specifies the length of the radius of the radial gradient as from the center to the Angle farthest from the center
    • closest-side: Specifies that the radius length of the radial gradient is from the center of the circle to the edge nearest the center
    • closest-corner: Specifies that the radius length of the radial gradient is the Angle from the center to the nearest center of the circle
    • farthese-side: Specifies that the radius length of the radial gradient is from the center of the circle to the edge farthest from the center
  • positionDefine the center of the gradient. The value may be:
    • center: The default value is from the center of the circle
    • top: Sets the top as the center of the circle
    • bottom: Set the bottom to the center of the circle

    You can also set the percentage (calculated from the top left corner) to determine the center of the circle

  • color-list: a list of gradient colors, each color block can be viewed as onecolor-item<color, [size]>
    • color: The current gradient color
    • size: Size of the current gradient

Such as:

background-image: radial-gradient( #E94E65.#1574A8);
Copy the code

You’ll get it

3. Conic-gradient

Note: Please use it in higher versions of Chrome to see its most commonly used APIS:

background: conic-gradient(deeppink, yellowgreen);
Copy the code

Results obtained:

一

Rotate gradient in one direction (clockwise by default)

Similarly, each color block in the gradient list can be viewed as a color-item, containing two values
,>

  • color: The current gradient color
  • size: Percentage of current gradient (percentage or fixed size)

Such as:

background-image: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
border-radius: 50%;
width: 200px;
height: 200px;
Copy the code

Get:

Here represents:

  1. 0-30% range is used
  2. Deeppink 0-70% range is used
  3. Teal is used for yellowgreen0-100%

When you want to repeat angular gradients, use repeating-Conic-gradient

background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);
Copy the code

Get the effect:

篇

I hope you can point out any questions in the comments section, AND I will correct them in time. (the head)

New people on the road, but also include more. I am MoonLight, a fledgling small front end.