©2020-2024 ioDraw All rights reserved
Because I'm just looking at the code of the previous class , And it is unlikely to be used in the future , So I won't make too much introduction here .
design sketch ：
repeating-linear-gradient() function ： Use to create a repeating linear gradient “ image ”.
grammar ：background: repeating-linear-gradient(angle | to side-or-corner,
color-stop1, color-stop2, ...);angle Define the angular direction of the gradient ;to
side-or-corner Specify the starting position of the linear gradient （ And angle Cannot appear at the same time ）; color-stop1, color-stop2,
… Specify the start and end color of the gradient , You can specify the percentage of each color .
repeating-radial-gradient() function ： Used to create repeated radial gradients “ image ”.
Source code ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
linear-gradient（ Linear gradient ） And radial-gradient( Radial Gradient )</title> <style> #linear{width: 420px
;height:259px;margin:10px auto; /*background:repeating-linear-gradient(to right
top,blue, green 10%, yellow 15%);*/ /* Defines the angular direction of the gradient as 78deg*/ background:
repeating-linear-gradient(78deg,blue, green 10%, yellow 15%);} #radial{width:
350px;height:350px;margin:10px auto; border-radius: 50%; background:
repeating-radial-gradient( yellow 5%,green,purple 10%); } </style> </head> <body
> <div id=linear></div> <div id=radial></div> </body> </html>
Technology