Funktionen repeating-radial-gradient

Funktionen repeating-radial-gradient skapar en upprepad radiell gradient. Det betyder att vi sätter ett visst gradientmönster, till exempel från 0px till 10px - en gradient från rött till blått och denna gradient kommer att upprepas över hela blocket: 0px till 10px, från 10px till 20px, från 20px till 30px och så vidare.

Funktionen fungerar med samma parametrar som radial-gradient, skillnaden är bara i upprepningseffekten. Se de accepterade parametrarna i beskrivningen av radial-gradient.

Syntax

cssselektor {
  background: repeating-radial-gradient([form typ position], färg1 storlek1, färg2 storlek2...);
}

Exempel

Koncentriska cirklar:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Exempel

Koncentriska ellipser:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
  width: 400px;
  height: 200px;
}

Результат:

Exempel

Placera de koncentriska cirklarna inte i mitten, utan vid kanten:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Se även