CSS konisk-gradient() funktion

Definition og brug

CSS' konisk-gradient() Funktionen sætter den koniske gradient som baggrundsbillede.

En konisk gradient er en farveovergang, der roterer omkring midtpunktet (lignende en tørning og farverhjul).

For at oprette en konisk gradient skal du mindst definere to farvestoppunkter.

Eksempel på konisk gradient:

Eksempel

Eksempel 1

Der er tre farver i den koniske gradient:;

#grad {
  background-image: konisk gradient(rød, guld, grøn);
}

Prøv det selv

Eksempel 2

Der er fem farver i den koniske gradient:;

#grad {
  background-image: konisk gradient(rød, guld, grøn, blå, sort);
}

Prøv det selv

Eksempel 3

Der er tre farver, og hver farve har en vinkel specificeret:;

#grad {
  background-image: konisk gradient(rød 45grader, guld 90grader, grøn 210grader);
}

Prøv det selv

Eksempel 4

Ved at tilføje border-radius: 50% ser den koniske gradient ud som en tørning:;

#grad {
  background-image: konisk gradient(rød, guld, grøn, blå, sort);
  border-radius: 50%;
}

Prøv det selv

Eksempel 5

Med startvinkel konisk gradient:

#grad {
  background-image: konisk-gradient(fra 90deg, rød, guld, grøn);
  border-radius: 50%;
}

Prøv det selv

Eksempel 6

Med centerposition konisk gradient:

#grad {
  background-image: konisk-gradient(ved 60% 45%, rød, guld, grøn);
  border-radius: 50%;
}

Prøv det selv

Eksempel 7

Samtidig med startvinkel og centerposition konisk gradient:

#grad {
  background-image: konisk-gradient(fra 90deg ved 60% 45%, rød, guld, grøn);
  border-radius: 50%;
}

Prøv det selv

Eksempel 8

En anden cirkel diagram eksempel:

#grad {
  background-image: konisk-gradient(rød 0deg, rød 90deg, guld 90deg, guld 180deg, grøn 180deg);
  border-radius: 50%;
}

Prøv det selv

CSS syntaks

background-image: konisk-gradient([fra angle] position,] color degree, color degree, ... );

Tekniske detaljer

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter funktionen.

Relaterede sider

TilføjeCSS gradient

Reference:CSS background-image egenskab

Reference:CSS linear-gradient() funktion

Reference:CSS radial-gradient() funktion

Reference:CSS gentagende-konisk-gradient() funktion

Reference:CSS gentagende-linear-gradient() funktion

Reference:Reference: CSS repeating-radial-gradient() funktion