In my last article about linear gradient, I left a suspense about how to draw the small sun, which used the radial-gradient() I will explain in detail today.

grammar

background-image: radial-gradient(shape size at position, start-color, ... , last-color)

The sample

As usual, we’ll start with the simplest demo:

div {
    width: 300px;
    height: 200px;
    background-image: radial-gradient(red, black)
}
Copy the code

As you can see, the default gradient is oval, so let’s try to make it round:

div {
    background-image: radial-gradient(circle, red, black)
}
Copy the code

We found the circle incomplete, why?? Because the default size is the farthest corner, let’s try the farthest side.

div {
    background-image: radial-gradient(circle farthest-side, red, black)
}
Copy the code

We want the circle to appear somewhere other than right in the middle. That’s a really good question. Let’s try drawing it in the top left corner of the div:

div {
    background-image: radial-gradient(circle closest-side at 250px 50px, red, black)
}
Copy the code

Well, you’re smart enough to see another problem, we have to draw a circle that touches some side or some Angle, have we ever thought of the question, I want this circle to be anywhere? Let’s continue:

div {
    background-image: radial-gradient(circle 20px at 250px 50px, red, black)
}
Copy the code

Beautiful! Next, let’s explore how to set the color. Let’s make a variety of colors:

div {
    background-image: radial-gradient(circle, red, green, blue)
}
Copy the code

Can you support stop marks like linear gradients? The answer is yes:

div {
    background-image: radial-gradient(circle, red, green 10%, blue)
}
Copy the code

Sunrise over the Sea:

Finally, attach the complete code of the previous article:

div {
    position: relative;
    width: 300px;
    height: 200px;
    background-image: linear-gradient(red, orange, yellow 50%, blue 40%, purple);
}
div::after{
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: radial-gradient(circle 30px at center 70px, red, yellow); 
    opacity: 0.3;
}
Copy the code

Parameter Description:

  • shape: Shape (ellipse and circle only)
    • ellipseEllipse (default)
    • circle 圆
  • sizeSize:
    • Keyword type:
      • farthest-corner: Angle farthest from the center of the circle (default)
      • farthest-side: The edge farthest from the center of the circle
      • closest-corner: The Angle closest to the center of the circle
      • closest-side: The edge closest to the center of the circle
    • Numerical (supportedpx.em.ptUnits of equal size,Does not support%!!!!!!!!!)
      • 20px ✔
      • 30em ✔
      • 40pt ✔
      • 50% ✖
  • positionPosition: (Must be preceded byat!!!!!!!!!)
    • Keywords (9 types) :
      • centerMedian (default) equalscenter center
      • topThe top is equivalent tocenter top
      • leftThe left-hand side is equivalent toleft center
      • rightThe right-hand side is equivalent toright center
      • bottomThe bottom is equivalent tocenter bottom
      • left topYou could also write the top lefttop left(the same below)
      • right topThe upper right
      • left bottomThe lower left
      • right bottomThe lower right
    • Value: Supportedpx.em.pt.%Unit of equal size)
      • 10px 2em ✔
      • 20pt 30% ✔
      • 30pxAll the ones that only write one value. centerShort for, here is30px center
  • start-color: Start color (The same color as the linear gradient)
  • last-color: End color (The same color as the linear gradient)

conclusion

Today is the last day of work. Has everyone had a holiday? Happy New Year to everyone in advance!!

End, scatter flowers ~~~