Funksjonen radial-gradient

Funksjonen radial-gradient setter en radiell gradient. Denne funksjonen brukes på egenskaper som setter bakgrunnsbilde: background, background-image eller rammebilde: border-image, background-image-source.

Syntaks

cssvelger {
  background: radial-gradient([form type posisjon], farge1 størrelse1, farge2 størrelse2...);
}

Verdier

Verdier for type

Merknad

Type og form kan byttes om, men posisjon må komme til slutt i den første parameteren. Gradienttype og dens størrelse fungerer ikke sammen (logisk, de konflikter jo). Størrelsen vinner.

Eksempel . Den enkleste varianten

La oss bare sette start- og sluttfarge:

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

css#elem {
  background: radial-gradient(red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Eksempel . Legger til posisjon

La oss sette senterets plassering: 30px - innrykk fra venstre, 100px - innrykk fra toppen:

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

css#elem {
  background: radial-gradient(at 30px 100px, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Eksempel . Posisjon i prosent

La oss sette senterets plassering i prosent: 30% - innrykk fra venstre, 50% - innrykk fra toppen:

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

css#elem {
  background: radial-gradient(at 30% 50%, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Eksempel . Posisjon med nøkkelord

Man kan bruke nøkkelord top, bottom, left, right, center i ulike kombinasjoner. La oss for eksempel plassere gradienten til høyre i senter:

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

css#elem {
  background: radial-gradient(at right center, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Eksempel . Gradientens størrelse

I dette tilfellet vil gradienten fungere slik: fra 0px til 20px vil det være ren rød farge, fra 20px til 60px - gradient fra rød til blå, etter 60px - ren blå farge:

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

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

Eksempel . Flere farger etter hverandre

I dette tilfellet vil gradienten fungere slik: fra 0px til 20px vil det være ren rød farge, fra 20px til 40px vil det være ren blå farge, fra 40px til 60px - gradient fra blå til grønn, etter 60px - ren grønn farge:

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

css#elem {
  background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

Eksempel . Størrelse + posisjon

La oss samtidig sette størrelser for ulike farger og posisjonen til gradientens senter:

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

css#elem {
  background: radial-gradient(at 30px 60px, red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

Eksempel . Gradientens form

Gradientens form settes med den første parameteren og kan ta 2 verdier: circle (sirkulær gradient) eller ellipse (elliptisk gradient, standard). Hvorfor har vi ikke sett elliptiske gradienter før dette, selv om den settes som standard? Fordi inntil nå har formen på blokkene vært kvadratisk. Hvis vi endrer formen til rektangulær, vil vi se en elliptisk gradient:

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

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

Eksempel . Rund gradient

La oss lage en rund gradient i en rektangulær blokk. For å gjøre dette setter vi gradientens form med nøkkelordet circle som første parameter:

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

css#elem {
  background: radial-gradient(circle, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

Eksempel . Legger til posisjon

La oss til den forrige koden legge til gradientens posisjon:

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

css#elem {
  background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

Eksempel . Type farthest-corner + circle

Gradientens form beregnes basert på informasjon om avstanden til det fjerneste hjørnet i blokken:

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

css#elem {
  background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Eksempel . Type farthest-corner + ellipse

Gradientens form beregnes basert på informasjon om avstanden til det fjerneste hjørnet i blokken:

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

css#elem {
  background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Eksempel . Type farthest-side + circle

Gradienten strekker seg til den fjerneste siden av blokken:

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

css#elem {
  background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Eksempel . Type farthest-side + ellipse

Gradienten strekker seg til den fjerneste siden av blokken:

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

css#elem {
  background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Eksempel . Type closest-corner + circle

Gradientens form beregnes basert på informasjon om avstanden til nærmeste hjørne i blokken:

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

css#elem {
  background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Eksempel . Type closest-corner + ellipse

Gradientens form beregnes basert på informasjon om avstanden til nærmeste hjørne i blokken:

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

css#elem {
  background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Eksempel . Type closest-side + circle

Gradientens form sammenfaller med den nærmeste siden til blokken:

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

css#elem {
  background: radial-gradient(circle closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Eksempel . Type closest-side + ellipse

Gradientens form sammenfaller med den nærmeste siden til blokken:

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

css#elem {
  background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Se også