girişCSS: Arka plan için radyal gradyan. Radyal-gradyan (): Radyal gradyan Birden çok renk durağı kullanma
Radyal degradeler, doğrusal olanlardan farklı şekilde oluşturulur. Doğrusal olanların renkleri, yönü belirleyen çizgiye dik yerleştirilmişse, radyal renkler verilen merkezden uzaklaşır ve gradyan bir daire veya elips şeklini alabilir.
En basit gradyan için renkleri ayarlamanız yeterlidir:
Arka plan: radyal gradyan (altın, turuncu kırmızı);
Varsayılan olarak, degradenin merkezi ortalanır ve degrade eliptiktir:
Renklere ek olarak, degrade şekillendirilebilir, konumlandırılabilir ve boyutlandırılabilir. Seçenekler, doğrusal gradyanlardan daha karmaşık bir şekilde birleşir ve davranır.
form(son gradyan şekli) bir daire ve bir elips olabilir. Varsayılan bir elipstir, gradyan, gerekirse gererek elemanın tüm boş alanını işgal etme eğilimindedir.
Gradyanın bir daire şekline sahip olması için, bunun açık bir şekilde çember anahtar kelimesi kullanılarak belirtilmesi gerekir.
Şekil belirtilmemiş ancak boyut belirtilmişse - bir değer dairenin yarıçapını belirler, iki değer varsa - gradyan bir elips şeklini alır. Boyutlar mevcut olduğunda degradenin şeklinin açıkça tanımlanması yoksayılır.
Konum nerede bulunacağını belirler merkez gradyan. Doğrusal gradyan için kullanılan anahtar sözcüklerin aynısı kullanılır, ancak at önekiyle birlikte: üstte, sağda, altta, solda ve merkezde varsayılandır.
Degradeyi belirli bir tarafa konumlandırmak için birbirleriyle birleştirilebilirler, örneğin: sağ üstte - sağ üst köşede.
Aşağıda farklı pozisyonların nasıl çalıştığını görebilirsiniz:
İlk kare kodu:
Arka plan: radyal gradyan (sol üstte, mor, kıpkırmızı, turuncu kırmızı, altın);
Ayrıca degradenin tam konumunu, örneğin %20 %50 veya 10 piksel 150 piksel olarak ayarlayabilirsiniz.
Boyut son gradyan şeklinin boyutlarını belirler. Eliptik gradyanlar için değerler yüzde olarak belirtilebilir, yuvarlak gradyanlar için verilemez.
Bir değer verilirse, dairesel gradyanın yarıçapı olarak kabul edilir. İki değer belirtilirse - birincisi elipsin yatay yarıçapı, ikincisi - dikey olarak kabul edilir.
Aşağıda yuvarlak ve eliptik gradyan örnekleri verilmiştir. Şeklin şekli verilen boyutlara göre belirlenir:
Anahtar kelimeleri de kullanabilirsiniz:
en yakın taraf - Degrade, degradenin merkezine en yakın öğenin sınırında sona erer. Bu bir elipsse, degrade öğenin tüm sınırlarına dokunur. en uzak taraf - Degrade, öğenin en uzak sınırında sona erer. Bu bir elipsse, degrade öğenin tüm sınırlarına dokunur. en yakın köşe - Uç şekli, öğenin degradenin merkezine en yakın köşesinden geçecek şekilde gerilir. Hedef şekil bir elips ise, degrade tüm şekli dolduracak şekilde uzar. Bu parametre ile degrade, kısmen sınırlarının ötesine geçerek tüm şekli doldurur. en uzak köşe - En yakın köşeye benzer, ancak son şeklin degradenin merkezinden en uzak köşeden geçmesi dışında. Varsayılan değer.
Kodun eylemini daha iyi görebilmeniz için bazı degradelere alt konum eklendi:
Radyal gradyan aynı zamanda tekrar ediyor olabilir - bu tekrar eden radyal gradyandır.
Basit kod:
Arka plan: yinelenen-radyal-gradyan (daire, koyu haki, koyu haki 0,5em, şeffaf 0,5em, şeffaf 1,5em);
Doğrusal gradyanda olduğu gibi, yinelenen gradyan çok düzgün bir şekilde oluşturulmaz.
Birkaç arka planı farklı parametrelerle birleştirerek harika şeyler elde edebilirsiniz:
Desenler oluştururken mutlak birimler (px) değil de göreli birimler (em,%) kullanırsanız, elde edilen desenlerin boyutu yalnızca yazı tipi boyutunu değiştirerek kolayca ayarlanabilir.
Degradeler hakkında konuştuğumuzda, "gradyanların CSS'de bir görüntünün yerini aldığı gerçeğiyle başlamaya değer. Bu", CSS'de bir degrade oluşturmanın tarayıcıya, tarayıcıya bir görüntüyü boyamak yerine ekranda bir görüntü boyamak için talimatlar sağladığını söylemenin süslü bir yolu. Photoshop veya Sketch gibi bir görüntü düzenleme uygulamasında oluşturduğunuz bir dosyanın kaynak URL'sini tarayıcıya sağlarsınız. Aynı şeyi kodda yapmanın yerel bir CSS yoludur ve bu nedenle degradeler, CSS Görüntü Değerleri ve Değiştirilen İçerik spesifikasyonuna dahil edilir.
Bu degradenin şeklin nasıl elips olduğunu varsaydığını görebilirsiniz. Bunun nedeni, elemanın kendisinin tam bir kare olmamasıdır. Bu durumda, bunun yerine bir daire kabul ederdi. Oldukça akıllı! Şekil değeri olarak açıkça daireyi beyan etseydik, burada ne olurdu:
Gradyan (arka plan resmi: radyal-gradyan (daire, sarı, # f06d06);)
Degradenin dairesel olduğuna dikkat edin, ancak yalnızca en uzak kenar boyunca bitiş rengine kadar kaybolur. Şimdi, soldurmanın şeklin "en yakın tarafı" ile bitmesini sağlamak için konum değerini açıkça bildirebiliriz, bunun yerine:
Gradyan (arka plan görüntüsü: radyal-gradyan (en yakın kenarı daire, sarı, # f06d06);)
Olası değerler şunlardır: en yakın köşe, en yakın kenar, en uzak köşe, en uzak kenar. Bunu şu şekilde düşünebilirsiniz: "Bu radyal degradenin merkez noktadan __________'ye kadar solmasını istiyorum ve diğer her yer buna uyum sağlamak için doldurulur."
Bir radyal gradyan "varsayılan merkezden başlamak zorunda da değildir, ilk parametrenin bir parçası olarak" at ______ "kullanarak belirli bir nokta belirtebilirsiniz, örneğin:
Gradyan (arka plan resmi: radyal-gradyan (sağ üstteki daire, sarı, # f06d06);)
Örneği bir kare yaparak ve bir renk durağı ayarlayarak burada daha açık hale getireceğim:
Tarayıcı Desteği
Radyal-gradyan () için tarayıcı desteği büyük ölçüde aynıdır. İstisna, Opera'nın çok eski bir sürümüdür. Gradyanları desteklemeye başladıklarında, radyal değil, yalnızca doğrusal olarak hesaplandılar.
Ancak doğrusal gradyan ()'a benzer şekilde, tarayıcı desteğinizin çok derine inmesi gerekiyorsa, bunları kendiniz yönetmek yerine sizin için satıcı öneklerini işleyen benzer bir araç kullanmayı düşünebilirsiniz.
Bu tarayıcı destek verileri,
Bu etkileşimli örneğin kaynağı bir GitHub deposunda depolanır. Etkileşimli örnekler projesine katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/interactive-examples'ı kopyalayın ve bize bir çekme isteği gönderin.
Radyal degradenin bileşimi
Bir radyal gradyan şu şekilde tanımlanır: Merkez noktası, bir bitiş şekli ve iki veya daha fazla renk durdurma noktaları.
Düzgün bir degrade oluşturmak için, radyal-gradyan () işlevi, merkezden dışa doğru yayılan bir dizi eşmerkezli şekil çizer. bitiş şekli(ve potansiyel olarak ötesinde). Bitiş şekli bir daire veya bir elips olabilir.
Renk durdurma noktaları bir sanal gradyan ışını merkezden sağa doğru yatay olarak uzanır. Yüzdeye dayalı renk durdurma konumları, bitiş şekli ile %100'ü temsil eden bu gradyan ışını arasındaki kesişime göredir. Her şekil, kesiştiği gradyan ışını üzerindeki renk tarafından belirlenen tek bir renktir.
Sözdizimi
/ * Konteynerinin ortasında kırmızı başlayan, maviye dönen ve yeşil biten bir gradyan * / radyal-gradyan (merkezde daire, kırmızı 0, mavi, yeşil %100)değerler
(veya| anahtar kelime | Açıklama |
|---|---|
| en yakın taraf | Degradenin bitiş şekli, kutunun merkezine en yakın kenarıyla (daireler için) veya merkeze en yakın hem dikey hem de yatay kenarlarla (elipsler için) buluşur. |
| en yakın köşe | Gradyanın bitiş şekli, kutunun merkezinden en yakın köşesine tam olarak denk gelecek şekilde boyutlandırılmıştır. |
| en uzak taraf | En yakın kenara benzer, ancak bitiş şekli kutunun merkezinden en uzak tarafını (veya dikey ve yatay kenarlarını) karşılayacak şekilde boyutlandırılmıştır. |
| en uzak köşe | Varsayılan değer olan degradenin bitiş şekli, kutunun merkezinden en uzak köşesiyle tam olarak buluşacak şekilde boyutlandırılır. |
Not: Bu işlevin ilk uygulamaları, sırasıyla standart en uzak köşe ve en yakın tarafın eşanlamlıları olarak diğer anahtar sözcükleri (kapak ve içerme) içeriyordu. Bazı uygulamalar bu eski varyantları zaten bıraktığından, yalnızca standart anahtar kelimeleri kullanın.
resmi sözdizimi
radyal-gradyan ([[daire ||Negatif olduğuna dikkat edin
Örnekler
Basit gradyan
Radyal-gradyan (arka plan görüntüsü: radyal-gradyan (camgöbeği %0, şeffaf %20, somon %40);)
Merkezlenmemiş gradyan
.radial-gradyan (genişlik: 240 piksel; yükseklik: 120 piksel;)
Radyal gradyan (arka plan görüntüsü: radyal gradyan (en uzak köşede 40px 40px, # f35 %0, # 43e %100);)
Özellikler
| Şartname | Durum | Yorum Yap |
|---|---|---|
| CSS Görüntüleri Modülü Seviye 3 Bu belirtimdeki "radyal-gradyanlar ()" tanımı. |
Aday Önerisi | İlk tanım. |
Tarayıcı Uyumluluğu
Bu sayfadaki uyumluluk tablosu, yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/browser-compat-data adresini kontrol edin ve bize bir çekme talebi gönderin.
GitHub'da uyumluluk verilerini güncelleyin
| masaüstü | mobil | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Krom | Köşe | Firefox | Internet Explorer | Opera | Safari | Android web görünümü | Android için Chrome | Android için Firefox | Android için Opera | iOS'ta Safari | Samsung İnternet | |
| radyal gradyan () | Chrome Tam destek 26 Tam destek 26 Tam destek 13 ön ekli ön ekli | Kenar Tam destek 12 | Firefox Tam destek 16 notlar Tam destek 16notlar notlar Firefox 36'dan önce, gradyanlar önceden çarpılmış renk uzayına uygulanmıyordu, bu da saydamlıkla kullanıldığında beklenmedik şekilde gri tonlarının görünmesine neden oluyordu. Tam destek 3.6ön ekli notlar ön ekliön ekli ön ekliön ekli Engelli ön ekli | IE Tam destek 10 notlar Tam destek 10notlar notlar Özel bir filtre aracılığıyla Internet Explorer 5.5 ila 9.0 desteklenen gradyanlar:. | Opera Tam destek 12.1 Tam destek 12.1 Destek yok 11.6 - 15 ön ekli ön ekli Tam destek 15ön ekli ön ekli Satıcı öneki ile uygulandı: -webkit- | Safari Tam destek 6.1 Tam destek 6.1 Tam destek 5.1 ön ekli notlar ön ekli -webkit-gradyan (radyal, ...) | WebView Android Tam destek ≤37 Tam destek ≤37 Tam destek ≤37 ön ekli ön ekli Satıcı öneki ile uygulandı: -webkit- | Chrome Android Tam destek 26 Tam destek 26 Tam destek 18 ön ekli ön ekli Satıcı öneki ile uygulandı: -webkit- | Firefox Android Tam destek 16 notlar Tam destek 16notlar notlar Firefox 36'dan önce, gradyanlar önceden çarpılmış renk uzayına uygulanmıyordu, bu da saydamlıkla kullanıldığında beklenmedik şekilde gri tonlarının görünmesine neden oluyordu. Tam destek 4ön ekli notlar ön ekli Satıcı öneki ile uygulandı: -moz- Notlar Firefox 42'den beri, degradelerin ön ekli sürümü layout.css.prefixes.gradients false olarak ayarlanarak devre dışı bırakılabilir. tam destek 49ön ekli ön ekli Satıcı öneki ile uygulandı: -webkit- Tam destek 44ön ekli Engelli ön ekli Satıcı öneki ile uygulandı: -webkit- Devre Dışı Sürüm 44'ten itibaren: bu özellik layout.css.prefixes.webkit tercihinin gerisindedir (true olarak ayarlanması gerekir). Firefox'ta tercihleri değiştirmek için about: config adresini ziyaret edin. | Opera Android Tam destek 12.1 Tam destek 12.1 Destek yok 12 - 14 ön ekli ön ekli Satıcı önekiyle uygulandı: -o- Tam destek 14ön ekli ön ekli Satıcı öneki ile uygulandı: -webkit- | Safari iOS Tam destek 6.1 Tam destek 6.1 Tam destek 6 ön ekli notlar ön ekli Satıcı öneki ile uygulandı: -webkit- Notlar Safari 4, deneysel bir -webkit-gradient (radyal, ...) işlevini destekliyordu. Bu eski modası geçmiş sözdizimi, uyumluluk amacıyla hala desteklenmektedir. | Samsung İnternet Android Tam destek 1.5 Tam destek 1.5 Tam destek 1.0 ön ekli ön ekli Satıcı öneki ile uygulandı: -webkit- |
| sözdiziminde | Chrome Tam destek 26 | Kenar Tam destek 12 | Firefox Tam destek 16 notlar Tam destek 16notlar notlar Firefox 36'dan önce, gradyanlar önceden çarpılmış renk uzayına uygulanmıyordu, bu da saydamlıkla birlikte kullanıldığında beklenmedik şekilde gri tonlarının görünmesine neden oluyordu. Tam destek 10ön ekli notlar ön ekli Satıcı öneki ile uygulandı: -moz- Notlar Firefox 42'den beri, degradelerin ön ekli sürümü layout.css.prefixes.gradients false olarak ayarlanarak devre dışı bırakılabilir. tam destek 49ön ekli ön ekli Satıcı öneki ile uygulandı: -webkit- Tam destek 44ön ekli Engelli ön ekli Satıcı öneki ile uygulandı: -webkit- Devre Dışı Sürüm 44'ten itibaren: bu özellik layout.css.prefixes.webkit tercihinin gerisindedir (true olarak ayarlanması gerekir). Firefox'ta tercihleri değiştirmek için about: config adresini ziyaret edin. | IE Tam destek 10 | Opera Tam destek 15 Tam destek 15 Destek yok 11,6 - 15 ön ekli ön ekli Satıcı önekiyle uygulandı: -o- | Safari Destek yok Hayır | WebView Android Tam destek ≤37 | Chrome Android Tam destek 26 | Firefox Android Tam destek 16 Tam destek 16 Tam destek 10 ön ekli ön ekli Satıcı önekiyle uygulandı: -moz- | Opera Android Tam destek 14 Tam destek 14 Destek yok 12 - 14 ön ekli ön ekli Satıcı önekiyle uygulandı: -o- | Safari iOS Destek yok Hayır | Samsung İnternet Android Tam destek 1.5 |
| Çift konumlu renk durakları | Chrome Tam destek 71 | Kenar Tam destek 79 | Firefox Tam destek 64 | IE Destek yok Hayır | Opera Tam destek 58 | Safari Tam destek 12.1 | WebView Android Tam destek 71 | Chrome Android Tam destek 71 | Firefox Android Tam destek 64 | Opera Android Tam destek 50 | Safari iOS Tam destek 12.2 | Samsung İnternet Android Tam destek 10.0 |
| Enterpolasyon İpuçları / Gradyan Orta Noktaları | Chrome Tam destek 40 | Kenar Tam destek 79 | Firefox Tam destek 36 | IE Destek yok Hayır | Opera Tam destek 27 | Safari Tam destek 6.1 | WebView Android Tam destek 40 | Chrome Android Tam destek 40 | Firefox Android Tam destek 36 | Opera Android Tam destek 27 | Safari iOS Tam destek 6.1 | Samsung İnternet Android Tam destek 4.0 |
Efsane
Tam destek Tam destek Destek yok Destek yok Uygulama notlarına bakın. Uygulama notlarına bakın. Kullanıcı bu özelliği açıkça etkinleştirmelidir. Kullanıcı bu özelliği açıkça etkinleştirmelidir. Kullanım için bir satıcı öneki veya farklı bir ad gerektirir.Kuantum CSS notları
Gecko, radyal-gradyan (daire altın, kırmızı) gibi radyal gradyanların, daire ve altın arasındaki eksik virgül nedeniyle "olmamaları gerektiği halde" çalışacağı uzun süredir devam eden bir hataya sahipti. Ayrıca,
Radyal bir degrade, bir daire veya elips (varsayılan şekil) içinde tüm yönlerde degradenin merkez noktasından uzanır. yumuşak bir geçiş bir renk tonundan diğerine. Radyal-gradyan () işlevi kullanılarak bir radyal gradyan oluşturulur. İşlev, belirtilen renk tonları arasında radyal gradyan olan bir görüntü oluşturur. Varsayılan olarak, degradenin boyutu, uygulandığı öğenin boyutuyla eşleşir.
radyal-gradyan () işlevi, aşağıdaki virgülle ayrılmış bağımsız değişkenleri alır:
- İlk argüman, degradenin son şeklini, boyutunu ve başlangıç konumunu tanımlayan anahtar sözcükler ve/veya CSS birimleridir. İsteğe bağlı argüman.
- Her birinin ardından bir durma konumu izlenebilen iki veya daha fazla renkten oluşan virgülle ayrılmış bir liste.
En basit radyal gradyan, bir başlangıç ve bitiş rengi belirtmek için yalnızca iki bağımsız değişken gerektirir:
Div (arka plan resmi: radyal-gradyan (camgöbeği, çivit); genişlik: 400 piksel; yükseklik: 100 piksel;) Deneyin "
Doğrusal degradelerde olduğu gibi, bir radyal degrade ikiden fazla renkten oluşan bir liste içerebilir ve herhangi bir renk için bir durma konumu belirtilebilir.
Div (genişlik: 400 piksel; yükseklik: 100 piksel; kenar boşluğu: 10 piksel;) #one (arka plan görüntüsü: radyal-gradyan (camgöbeği, sarı, çivit mavisi, beyaz);) #two (arka plan görüntüsü: radyal-gradyan (camgöbeği, sarı) %10, indigo %30, beyaz %50);) Deneyin "
Radyal degradenin şekli, daire ve elips anahtar sözcükleri kullanılarak ve bunlardan biri ilk argüman olarak belirtilerek belirtilebilir:
Div (genişlik: 400 piksel; yükseklik: 100 piksel; kenar boşluğu: 10 piksel;) #bir (arka plan görüntüsü: radyal-gradyan (elips, camgöbeği, çivit);) #two (arka plan görüntüsü: radyal-gradyan (daire, camgöbeği, çivit) );) Dene "
Tarayıcı varsayılan olarak radyal degradenin merkez noktasını öğenin merkezine yerleştirir. Degradenin merkezi, at anahtar kelimesi ve ardından anahtar kelimeler (üst, sol, sağ, alt, orta) veya belirtilen CSS birimlerindeki değerler kullanılarak konumlandırılabilir:
| Anlam | Açıklama |
|---|---|
| sol üst sol merkez sol alt sağ üst sağ merkez sağ alt orta üst merkez merkez orta alt | Yalnızca birini belirtirseniz anahtar kelime, ikincisi "merkez" olacaktır. |
| x% y% | İlk değer yatay konumdur, ikinci değer dikeydir. Sol üst köşe %0 %0 konumudur. Sağ alt köşe %100 %100 konumdur. Yalnızca bir değer belirtirseniz, diğer değer %50 olacaktır. |
| x-konum y-konum | İlk değer yatay konum, ikincisi dikey konumdur. Sol üst köşe 0 0 konumudur. Birimler piksel (0px 0px) veya başka herhangi bir CSS ölçü birimi olabilir. Yalnızca bir değer belirtirseniz, diğer değer %50 olacaktır. % ve birimleri karıştırabilirsiniz. |
Degrade konumlandırma, ton değerlerinden önce belirtilir, ancak degradenin şeklini tanımlayan anahtar sözcükten sonra (belirtilmişse):
Div (genişlik: 400 piksel; yükseklik: 100 piksel; kenar boşluğu: 10 piksel;) #bir (arka plan görüntüsü: radyal-gradyan (sağda, camgöbeği, çivit);) #two (arka plan görüntüsü: radyal-gradyan (300 piksel 50 pikselde daire) , camgöbeği, çivit mavisi, sarı);) #üç (arka plan resmi: radyal-gradyan (sol üstte daire, camgöbeği, çivit mavisi, sarı);) Deneyin "
Degradenin boyutu (degradenin son şeklinin ne kadar büyük olması gerektiği), dört anahtar ifadeden biri kullanılarak veya CSS birimleri kullanılarak yarıçap belirtilerek (yarıçapı belirlemek için yüzdeleri kullanamazsınız) belirlenebilir.
| anahtar kelimeler | Açıklama | |
|---|---|---|
| Degradenin son boyutu, degradenin merkezi ile öğenin en yakın kenarı arasındaki mesafeye (bir daire için) veya merkez ile öğenin ona en yakın iki kenarı arasındaki mesafeye (bir elips için) bağlıdır. | ||
| Degradenin son boyutu, degradenin merkezi ile ona en yakın öğenin köşesi arasındaki mesafeye bağlıdır. |
 |
|
| Gradyanın son boyutu, gradyanın merkezi ile elemanın en uzak tarafı arasındaki mesafeye (bir daire için) veya gradyanın merkezi ile ondan en uzak iki taraf arasındaki mesafeye (bir elips için) bağlıdır. |
 |
|
| Degradenin son boyutu, degradenin merkezi ile öğenin en uzak köşesi arasındaki mesafeye bağlıdır. Bir daire veya elips şekli için varsayılan olarak kullanılır. |
 |
Degradenin veya yarıçapın boyutunu tanımlayan anahtar sözcükler, şekli tanımlayan anahtar sözcüklerden önce veya sonra ve her zaman konumu tanımlamadan önce belirtilir.
Div (genişlik: 400 piksel; yükseklik: 100 piksel; kenar boşluğu: 10 piksel;) #bir (arka plan görüntüsü: radyal-gradyan (100 pikselde daireye en yakın köşe, camgöbeği %50, çivit);) #two (arka plan görüntüsü: radyal- gradyan (en yakın daire, camgöbeği, kırmızı, çivit);) #üç (arka plan resmi: radyal-gradyan (200 pikselde 100 piksel daire, camgöbeği %50, çivit);) #dört (arka plan resmi: radyal-gradyan ( 170 piksel 50 piksel 175 pikselde elips, camgöbeği, # 90EE90, rgba (172.160.160,0));)
Pirinç. 1. Radyal ve doğrusal gradyan
Arka plan veya arka plan görüntüsü özelliği kullanılarak bir radyal gradyan oluşturulur.
Sözdizimi
arka plan görüntüsü: radyal gradyan ([daire ||<радиус>] [NS<позиция>]? , | [elips || [<радиус> | <проценты>] (2)] [en<позиция>]? , | [[daire | elips] ||<размер>] [NS<позиция>]? , | NS<позиция> , <цвет> [ , <цвет> ]*)
Tanımlamalar
| Açıklama | Örnek | |
|---|---|---|
| <тип> | Değerin türünü belirtir. | <размер> |
| A &&B | Değerler gösterilen sırada görüntülenmelidir. | <размер> && <цвет> |
| bir | B | Önerilen değerlerden yalnızca birinin seçilmesi gerektiğini belirtir (A veya B). | normal | küçük şapkalar |
| Bir || B | Her değer tek başına veya herhangi bir sırayla başkalarıyla birlikte kullanılabilir. | genişlik || saymak |
| Grup değerleri. | [kırp || geçmek] | |
| * | Sıfır veya daha fazla kez tekrarlayın. | [,<время>]* |
| + | Bir veya daha fazla kez tekrarlayın. | <число>+ |
| ? | Belirtilen tür, sözcük veya grup isteğe bağlıdır. | ek? |
| (A, B) | En az A'yı tekrarlayın, ancak B'den fazla değil. | <радиус>{1,4} |
| # | Virgülle ayırarak bir veya daha fazla kez tekrarlayın. | <время># |
Değerler
daire Dairesel bir şeklin radyal gradyanı. elips Eliptik bir degrade oluşturur. Bu form varsayılan olarak ayarlanmıştır.<радиус>CSS birimlerinde degradenin yarıçapı. Bir değer dairenin yarıçapını gösterir, iki değer x ekseni boyunca elipsin yarıçapını ve y ekseni boyunca yarıçapını gösterir. Açıkça bir yarıçap belirtilmemişse, degrade öğenin tüm arka planını dolduracaktır.<позиция>
Degradenin başladığı başlangıç noktasını belirtir. Nokta konumu, anahtar kelimeler veya piksel veya yüzde gibi kullanılabilir birimler kullanılarak arka plan konum değerlerine benzer şekilde yazılır; aşağıda olası kombinasyonlar verilmiştir.
- sol üst = sol üst = %0 %0 (sol üst köşede);
- üst = üst orta = orta üst = %50 %0 (orta üst);
- sağ üst = sağ üst = %100 %0 (sağ üst köşede);
- sol = sol orta = orta sol = %0 %50 (sol ve orta);
- merkez = merkez merkez = %50 %50 (ortalanmış) varsayılandır;
- sağ = sağ merkez = merkez sağ = %100 %50 (sağ ve ortalanmış);
- sol alt = sol alt = %0 %100 (sol alt köşede);
- alt = alt orta = orta alt = %50 %100 (alt orta);
- sağ alt = sağ alt = %100 %100 (sağ alt köşede).
| Anlam | kod | Açıklama | görüş |
|---|---|---|---|
| en yakın taraf | arka plan: radyal-gradyan (en yakın kenarı 30px 20px, #fff, # 000'de daire içine alın); arka plan: radyal gradyan (en yakın taraf 30 piksel 20 piksel, #fff, # 000); | Gradyan, bloğun en yakın kenarıyla (bir daire için) veya aynı anda en yakın yatay ve dikey kenarlarla (bir elips için) çakışır. |  |
arka plan: radyal-gradyan (en yakın köşeyi 30 piksel 20 piksel, #fff, # 000'de daire içine alın); arka plan: radyal gradyan (en yakın köşe 30 piksel 20 piksel, #fff, # 000); | Gradyanın şekli, bloğun en yakın köşesine olan mesafe bilgisine göre hesaplanır. |  |
|
arka plan: radyal gradyan (en uzak taraftaki daire 30 piksel 20 piksel, #fff, # 000); arka plan: radyal gradyan (en uzak taraf 30 piksel 20 piksel, #fff, # 000); | Etki olarak en yakın tarafa benzer, ancak gradyan kutunun uzak tarafına kadar uzanır. |  |
|
| en uzak köşe | arka plan: radyal gradyan (en uzak köşeyi 30 piksel 20 piksel, #fff, # 000'de daire içine alın); arka plan: radyal gradyan (en uzak köşe 30 piksel 20 piksel, #fff, # 000); | Gradyanın şekli, bloğun uzak köşesine olan mesafe bilgisine göre hesaplanır, |  |
Örnek
Bu örneğin sonucu aşağıda gösterilmiştir.
Not
26'dan önceki Chrome, 6.1'den önceki Safari ve 4.4'ten önceki Android, -webkit-radial-gradient () özelliğini destekler.
12.10 sürümünden önceki Opera, -o-radial-gradient () özelliğini destekler.
Firefox 16 sürümüne kadar -moz-radial-gradient () özelliğini destekler.
Tüm ön ekli özellikler, degradenin başlangıç noktasının konumunu belirtirken at anahtar sözcüğünü kullanmaz.
Şartname
Her spesifikasyon birkaç onay aşamasından geçer.
- Öneri - Bu belirtim W3C tarafından onaylanmıştır ve standart olarak önerilir.
- Aday Önerisi ( Olası öneri) - standarttan sorumlu grup, hedeflerine uygun olduğundan memnundur, ancak standardı uygulamak için geliştirici topluluğunun yardımına ihtiyaç vardır.
- Önerilen Öneri ( Önerilen öneri) - Bu noktada belge nihai onay için W3C Danışma Konseyi'ne sunulur.
- Çalışma Taslağı - Tartışma ve topluluk incelemesi için yapılan değişikliklerden sonra taslağın daha olgun bir versiyonu.
- Editörün taslağı ( içerik taslağı) - proje editörleri tarafından düzenlendikten sonra standardın taslak versiyonu.
- Taslak ( taslak şartname) standardın ilk taslağıdır.