CSS konik-gradyan() İşlev
Örnek
Üç renkli konik bir gradyan:
#grad {
background-image: conic-gradient(red, yellow,
green);
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
conic-gradient() işlevi, arka plan görüntüsü olarak bir konik gradyan ayarlar.
Konik gradyan, renk geçişlerinin bir merkez noktası etrafında döndürüldüğü bir gradyandır.
Konik bir gradyan oluşturmak için en az iki renk durağı tanımlamanız gerekir.
Konik Gradyan Örneği:
Sürüm: | CSS3 |
---|
Tarayıcı Desteği
Tablodaki sayılar, işlevi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Function | |||||
---|---|---|---|---|---|
conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
CSS Sözdizimi
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
Value | Description |
---|---|
from angle | Optional. The entire conic gradient is rotated by this angle. Default value is 0deg |
at position | Optional. Specifies the gradient center of the conic gradient. Default value is center |
color degree, ..., color degree | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a degree between 0 and 360 or a percent between 0% and 100%). |
Daha fazla örnek
Örnek
Beş renkli konik bir gradyan:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
}
Örnek
Üç renk ve her renk için bir derece içeren konik bir gradyan:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}
Örnek
border-radius: 50% ekleyerek konik degradenin pasta gibi görünmesini sağlayın:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Örnek
Bir açıdan bir konik gradyan:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
Örnek
konumunda olan bir konik gradyan:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Örnek
Hem açıdan hem de konumda olan bir konik gradyan:
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Örnek
Başka bir pasta grafiği:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow
90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
İlgili Sayfalar
CSS eğitimi: CSS Gradyanları