CSS'de bir iç gölge nasıl yapılır. CSS'de iç gölgeler

Sayfadaki blok elemanının altındaki gölge genellikle üç boyutlu bir etki yaratmak, elemana veya tasarımın bir parçası olarak dikkat çekmek için kullanılır. Elemanların altındaki küçük bir gölge ayrıca hacim ve derinlik sayfasını verir.

Gölge eklemek için, yalnızca iki tane zorunlu olan altı değeri olan Kutu-Shadow özelliği. İncirde. 1 Kutu-Shadow özelliğini olası tüm değerlerle gösterir, bunları tanımlamak için numaralandırılır.

İncir. 1. Kutu-Shadow özellik değerleri

1. inseter Anahtar Kelime, elemanın içindeki gölgeyi ayarlar;
2. yatay gölge kayması (5px - sağ, -5px - sol);
3. dikey kaydırma (5px - aşağı, -5px - yukarı);
4. gölgenin yarıçapı (0 keskin bir gölgedir);
5. gölge germe (5px - germe, -5px - sıkıştırma);
6. gölge rengi.

Yalnızca yatay ve dikeyişi belirttiğinizden emin olun, diğer tüm parametreler varsayılan olarak kabul edilecektir. Bu durumda, gölge bulanıklık ve siyah olmadan kesilecektir.

Farklı parametrelerin ve değerlerinin kombinasyonları nedeniyle, çok çeşitli gölgeler türlerini alabilirsiniz. Sekmesinde. 1 kodu ve yol açtığı sonucu gösterir.

Masa. 1. Gölge parametrelerinin birleştirilmesi

Kodu	Sonuç	Açıklama
kutu gölgesi: 5px 5px;		Sağ ve aşağıda keskin bir gölge.
kutu-gölge: -5px -5px;		Solda ve üstünde keskin bir gölge.
kutu gölgesi: 0 0 5px;		Elemanın etrafında bulanık gölge.
kutu gölgesi: 0 0 5px 2px;		2 piksel gölgesinin genişletilmesi.
kutu gölgesi: 0 0 5px 2px kırmızı;		Elemanın etrafında kırmızı kızdırma.
kutu gölgesi: 0.4EM 0.4EM 5px RGBA (122,122,122,0,5);		Yarı saydam gölge.
kutu gölgesi: inset 0 0 6px;		İçeride gölge.

Tablodan görülebileceği gibi, gölge vardiyası mutlaka piksel olarak ayarlanmaz, ancak uygun olmasına rağmen. Gölgenin rengi herhangi bir erişilebilir biçimde belirtilebilir, bu nedenle, yarı saydam bir gölge elde etmek için, RGBA formatı uygun olacak, böyle bir gölge herhangi bir arka plan üzerinde iyi görünecektir. Örnek 1'de, nasıl yapılacağı gösterilmiştir.

Örnek 1. Arka plan çizim üzerinde gölge

HTML5 CSS3 IE 9+ CR OP SA FX

Bu örneğin sonucu Şekil 2'de gösterilmiştir. 2. Gölge, bloğun köşesinin yuvarlanmasını tekrarlar.

İncir. 2. Arka Plan Çiziminde Gölge Türü

Bir "geniş" gölge eklerken, görünür tarayıcı penceresinin ötesine geçebileceğini ve böylece yatay kaydırma çubuğunun görünümüne yol açabileceği dikkate alınmalıdır.

Gölge, psödo elemanlarına da eklenebilir, bazen karmaşık bir düzen için gereklidir. İncirde. Şekil 3, gölgenin eklendiği başlığa sahip bir bloğu göstermektedir. Böylece kavşak sitesinde hiçbir satır olmaması için bir psödo elemanı kullanmak zorundadır :: sonra bir gölge ekleyin.

İncir. 3. Gölge ile blok

Örnek 2, böyle bir bloğun yaratılmasını göstermektedir.

Örnek 2. Gölge ile Blok

HTML5 CSS3 IE 9+ CR OP SA FX

Öğenin gölgesi yalnız olmayabilir, ancak hemen birkaç, parametreleri, virgül aracılığıyla kutu-gölge özelliğinin değerinde listelenmiştir. Örnek 3, tüm görüntülere çift gölgenin eklenmesini göstermektedir.

Örnek 2. Gölge ile Blok

HTML5 CSS3 IE 9+ CR OP SA FX

Bu örneğin sonucu Şekil 2'de gösterilmiştir. dört.

İncir. 4. Çift gölge ile görüntü

İlk gölge, çizimin solundaki 20 piksel yarıçapı ile gösterilirken, dördüncü parametre (-20PX) nedeniyle boyutu azalır. İkinci gölgenin parametreleri virgülden sonra gösterilir, gölge şeklin sağında görüntülenir ve aynı zamanda simetri için de azalır.

Kutu-Shadow özelliği bir veya daha fazla gölge öğesi ekler. Gölge, belirtilen mesafeye kaydırılan elemanın bir kopyasıdır. Gölgeler harici veya iç, bulanık veya düzdür, blokların devrelerini yuvarlatılmış köşelerle takip edebilirler. Inset Anahtar kelimesini kullanarak, elemanın içinde gölgeler oluşturulur, elemanı görsel olarak hacimsel veya depresyonda bulunur.

Kutu-Shadow özelliğini kullanarak bloğun gölgesini nasıl yapılır?

Destek tarayıcıları

Yani: 9.0
Kenar: 12.0
Firefox: 4.0, 3.5 -moz-
Krom: 10.0, 4.0 -WebKit-
Safari: 5.1, 3.1 -WebKit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -WebKit-
Android Tarayıcı: 4.0, 2.1 -WebKit-

1. Sözdizimi özellikleri kutusu-gölge

Kutu-Shadow özelliği, bloğa bir veya daha fazla gölge bağlar. Mülkiyet, gölgelerin yokluğunu veya virgül aracılığıyla gölgelerin listesini belirten hiçbirinin değerini kabul eder.

Her gölge, 2 ila 4 uzunluk uzunluğunda, isteğe bağlı renk ve isteğe bağlı anahtar kelime inset'ten temsil edilen ayrı bir gölgedir. İzin verilen uzunluklar 0; Varsayılan renkler, renk özelliğinin değerine eşittir.

Mülkiyet miras kalmadı.

İncir. 1. Sözdizimi özellikleri kutusu-gölge

Değerler:
x-ofset.	Gölgenin yatay yer değiştirmesini belirtir. Olumlu bir değer, metnin sağına kaydırılan bir gölge çizer, negatif uzunluk kalır.
y-ofset.	Gölgenin dikey kaymasını belirtir. Pozitif bir değer gölgeyi aşağı kaydırır, negatif.
bulanıklık	Bulanıklık yarıçapını belirtir. Negatif değerlere izin verilmez. Bulanıklık değeri sıfır ise, gölgenin kenarı açıktır. Aksi takdirde, değer arttıkça, gölgenin kenarı bulanıklaşır.
germe	Gölgenin arttığı mesafeyi ayarlar. Pozitif değerler, gölgenin her yöne doğru belirtilen yarıçapa genişletmesini sağlar. Negatif değerler gölge büzülmesini sağlar. İç gölgeler için, gölge genişlemesi, çevre şeklinin sıkıştırılması anlamına gelir.
renk	Gölgeleri belirtir. Renk eksikse, kullanılan renk renk özelliğinden alınır. Safari için, gölgenin rengi tanımlanır.
İnset.	Bloğun atılan gölgesini dış gölgeden içe değiştirir.
Yok	Varsayılan değer gölge yok demektir.
ilk	Varsayılan özellik değerini ayarlar.
kalıtım.	Mülkiyetin değerini ebeveyn elementinden devralır.

Gölgenin etkileri aşağıdaki gibi uygulanır: ilk gölge üstte ve gerisi arkadır. Gölgeler düzenini etkilemez ve diğer unsurları veya gölgelerini örtüşebilir. Döşeme bağlamları ve çizim sırası açısından, elemanın dış gölgeleri doğrudan bu elemanın arka planının altına çekilir ve elemanın iç gölgeleri doğrudan bu öğenin arka planının üstünde çekilir (sınırın ve kenarlık altında) Görüntü, varsa).

Öğenin birkaç kutu varsa, hepsi gölgeler alırlar, ancak gölgeler yalnızca sınırların da çizileceği yerlerde çizilir; Kutu dekorasyon kırılmasını görün.

Gölgeler kaydırmaya neden olmaz veya kaydırma alanının boyutunu arttırmaz.

2. Blok için Gölge Örnekleri

2.1. İç gölge

.Example-Shadow-1 (Arka Plan: # E6E3DF; Metin Hizası: Merkez;) .Example-Shadow-1 Span (Marj: 50px; Yükseklik: 100px; Genişlik: 200px; Ekran: Inline-Block; Kutu Gölge: INSET 2px 2px 5px RGBA (154, 147, 140, 0.5), 1px 1px 5px RGBA (255, 255, 255, 1);)

2.2. Bir tarafta düz gölge

düz.

düz.

.Example-Shadow-2 (Arka Plan: Bej; Metin-Hizala: Merkez;) .Example-Shadow-2 A (Ekran: Inline-blok; Sınır-yarıçapı: 5px; Dolgu: 15px 35px; Yazı Tipi: 22PX; Metin -Decorage: Yok; Marj: 20px; Renk: Beyaz; Arka Plan: # 55acee; \u200b\u200bKutu-Gölge: 0 5PX 0 # 3C93D5; Geçiş: .3s;). Example-Shadow-2 A: Hover (arka plan: # 6FC6FF ;)

2.3. "Malzeme tasarımı" tarzında gölge

.Example-Shadow-3 (Arka Plan: # E8E8E8; Metin Hizası: Merkez;) .Example-Shadow-3 Span (Arka Plan: Beyaz; Ekran: Inline-Block; Genişlik: 200px; Yükseklik: 100px; Margin: 50px; kutu - Shadow: 0 14px 28px RGBA (0,0,0,0.25), 0 10px 10px RGBA (0,0,0,0.22);)

Geleneksel gölgelerin kutusu gölge veya metin-gölge kullanarak uygulanması kolaydır. Peki ya iç gölgeler yapmanız gerekiyorsa? Bu makalede, bu tür gölgelerin sadece birkaç kod satırını kullanarak nasıl yapılacağı açıklanmaktadır.

Sözdizimi

Her şeyden önce, CSS'de gölgeleri uygulamanın iki ana yolunu göz önünde bulundurun.

kutu gölge

Tasarlamak kutu gölge Birkaç farklı değer içerir:

Yatay ofset. ve dikey ofset. - sırasıyla yatay ve dikey yer değiştirme. Bu değerler, nesnenin gölgeyi nasıl atacağını gösterir:

Yarıçapı bulanıklık. ve yayılma yarıçapı. Biraz daha zor. Onların farkı nedir? Değerlerin olduğu iki elementle bir örneğe bir göz atın yarıçapı bulanıklık. Farklı:

Gölgenin kenarı sadece bulanık. Farklı anlamlarla yayılma yarıçapı. Aşağıdakileri görüyoruz:

Bu durumda, gölgenin geniş bir alana dağıldığını görüyoruz. Değerleri belirtmezseniz yarıçapı bulanıklık. ve yayılma yarıçapı., sonra 0'a eşit olacaklar.

metin gölgesi.

Sözdizimi çok benzer kutu gölge:

Değerler benzerdir, ancak değil yayılma gölgesi.. Kullanım Örneği:

Kutu gölgesinde iç içe

Nesnenin içindeki gölgeyi "açmak" için, eklemeniz gerekir. İnset. CSS'de:

Kutu gölgesinin ana sözdiziminde anlaşılan, iç gölgelerin uygulanmasının ilkelerini anlamak çok kolaydır. Değerlerin hepsi aynıdır, renk ekleyebilirsiniz (Hex'te RGB):

RGB formatında renk, Gölge saydamlığından alfa değeri sorumludur:

Gölgeler ile görüntüler

Görüntüye bir dahili gölge ekleyin, normalden daha karmaşık div. Başlamak için, işte her zamanki resim kodu:

Gölgeyi böyle ekleyebileceğinizi varsaymak mantıklıdır:

IMG (Kutu Gölge: Inset 0px 0px 10px RGBA (0,0,0,0,5);)

Ancak gölge görünmüyor:

Her biri artıları ve eksileri olan bu sorunu çözmenin birkaç yolu vardır. İkisini düşünün. Birincisi, resmi olağan olarak sarmaktır. div:

DIV (Yükseklik: 200px; Genişlik: 400px; Kutu Gölge: INSET 0PX 0PX 10PX RGBA (0,0,0,0,0,9);) IMG (Yükseklik: 200px; Genişlik: 400px; Konum: Göreceli; Z- Dizin: -2;)

Her şey çalışıyor, ancak biraz ekstra işaretleme html ve css eklemeniz gerekir. İkinci yol, görüntüyü istenen bloğun arka planı ile ayarlamaktır:

Div (yükseklik: 200px; genişlik: 400px; arka plan: URL (http://lorempixum.com/400/200/transport/2); Kutu-Shadow: Inset 0px 0px 10px RGBA (0,0,0,0,0) , 9);)

İç gölgeler kullanırken ne olabilecek şey budur:

Metin gölgesinde iç

Metnin iç gölgesini uygulamak için, koda basit bir ekleme İnset. çalışmıyor:

Çözmek için önce başlığa uygulanır h1. Koyu arka plan ve ışık gölge takın:

H1 (arka plan rengi: # 565656; Renk: şeffaf; Metin gölge: 0px 2px 3px rgba (255,255,255,0.5);)

O kadar ortaya çıktı:

Gizli madde ekle arka plan klibi.hangi her şeyi metinden keser (karanlık bir arka plan üzerinde):

H1 (Arka Plan-Renk: # 565656; Renk: Şeffaf; Metin-Gölge: 0px 2px 3px RGBA (255,255,255,0.5); -WebKit-Background-Click: Metin; -Moz-Background-Click: Metin; Arka Plan-Klip: Metin; ;)

Neredeyse gerekli olduğu ortaya çıktı. Şimdi sadece biraz Darke metni (alfa) ve sonuç:

Bugün fotoğrafsız CSS gölgeleri nasıl yapacağız. Bu dersi inceledikten sonra artık CSS gölge jeneratörüne ihtiyacınız olmayacaksınız.

CSS3 kullanılarak oluşturulan gölgelerin ana avantajı nedir, bu nedenle bu, uygulama kolaylığında ve sunucuya istek sayısını azaltmak (artık fotoğraf kullanmıyoruz). CSS'de gölge yapmak için bir DIV ve CSS Tag özellik kutusu-Shadow özelliğine ihtiyacımız olacak. Ek bir işaretlemeye ihtiyacınız olmayacak, çünkü son sözde öğeler olacaktır: sonra ve: önce, ana nesneye yerleştirilecek (DIV sınıfı) blok).

CSS3 Gölge oluşturacağımız HTML koduna bir göz atın:

Daha sonra, hazır örnekler ve uygulamaları için gerekli olan kodları izleyebilirsiniz. Sayfadaki metni en aza indirmek için, CSS özelliklerini tarayıcı önekleriyle indiririz. Tam kod, uygun örneğin "Örnek" bağlantısına tıklayarak görülebilir.

.Block:% 40; Dolgu: 1EM; Marj: 2EM 10px 4EM; Arka Plan: #FFF; Sınır-yarıçapı: 4px; Kutu-Gölge: 0 1PX 4PX RGBA (0, 0, 0, 0,3) 0 0 40px RGBA (0 , 0, 0, 0.1) inset;) .Block: Daha önce, .Block: Sonra (içerik: ""; pozisyon: mutlak; z-index: -2; alt: 15px; sol: 10px; genişlik:% 50; yükseklik :% 20; Max-Genişlik: 300px; Kutu-Gölge: 0 15px 10px RGBA (0, 0, 0, 0,7); Dönüştür: Döndür (-3deg);) .Block: Sonra (sağ: 10px; sol: Otomatik; Dönüştür: Döndür (3DEG);)

.Block:% 40; dolgu: 1EM; marjı: 2EM 10 piksel 4EM; arka plan: #fff; kutu-gölge: 0 1px 4px rgba (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) İnset; sınır: 1px katı #efefef; kenarlık-yarıçapı: 0 0 120px 120px / 0 0 6px 6px;) .Block: Daha önce, .Block: Sonra (içerik: ""; pozisyon: mutlak; z-index: -2; Alt: 12px; Sol: 10px; Genişlik:% 50; Yükseklik:% 55; Maksimum Genişlik: 200px; Kutu Gölge: 0 8PX 12PX RGBA (0, 0, 0, 0,5); Dönüştür: Skew (-8deg) Döndürme (-3deg);) .Block: Sonra (sağ: 10px; sol: Otomatik; Dönüşüm: Skew (8deg) döndürme (3DEG);)

Gölgeyi kullanarak, bloğu perspektife verebilirsiniz. Örneği görüntüle.

.Block:% 40; dolgu: 1EM; marjı: 2EM 10 piksel 4EM; arka plan: #fff; kutu-gölge: 0 1px 4px rgba (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) inset;) .block: önce, .Block: Sonra (içerik: ""; pozisyon: mutlak; z-index: -2;) .Block: Daha önce (sol: 80px; alt: 5px; genişlik:% 50; yükseklik: % 35; Maksimum genişlik: 200px; kutu-gölge: -80px 0 8px rgba (0, 0, 0, 0.4); dönüşüm: eğri (50deg); dönüşüm kökenli: 0 100%;) .Block: Sonra (ekran) : Yok;)

Düzeltilmiş bir blokta CSS gölge. Örneği görüntüle.

.Block:% 40; dolgu: 1EM; marjı: 2EM 10 piksel 4EM; arka plan: #fff; kutu-gölge: 0 1px 4px rgba (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) INSET; Kutu Gölge: 0 15px 10px -10px RGBA (0, 0, 0, 0.5), 0 1PX 4PX RGBA (0, 0, 0, 0,3), 0 0 40px RGBA (0, 0, 0, 0.1) İnset ;) .block: önce, .Block: Sonra (içerik: ""; pozisyon: mutlak; z-index: -2;)

Örnek CSS3 Dikey olarak bükülmüş bir blok için gölge. Örneği görüntüle.

.Block:% 40; dolgu: 1EM; marjı: 2EM 10 piksel 4EM; arka plan: #fff; kutu-gölge: 0 1px 4px rgba (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) inset;) .block: önce, .Block: sonra (içerik: "; pozisyon: mutlak; z-index: -2;) .Block: önce (üst: 10px; alt: 10px; sol: 0; sağ: 50% Kutu gölge: 0 0 15px RGBA (0,0,0,0,6); Sınır-yarıçap: 10px / 100px;)

.Block:% 40; dolgu: 1EM; marjı: 2EM 10 piksel 4EM; arka plan: #fff; kutu-gölge: 0 1px 4px rgba (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) inset;) .block: önce, .Block: sonra (içerik: "; pozisyon: mutlak; z-index: -2;) .Block: önce (üst: 10px; alt: 10px; sol: 0; sağ: 0; Kutu gölgesi: 0 0 15px rgba (0,0,0,0,0,6); Sınır-yarıçapı: 10px / 100px;)

Örnek CSS3 yatay bükülmüş bir blok için gölge. Örneği görüntüle.

.Block:% 40; dolgu: 1EM; marjı: 2EM 10 piksel 4EM; arka plan: #fff; kutu-gölge: 0 1px 4px rgba (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) inset;) .block: önce, .Block: Sonra (içerik: "; pozisyon: mutlak; z-index: -2;) .Block: önce (üst:% 50; alt: 0px; sol: 10px; sağ: 10px ; Kutu-gölge: 0 15px RGBA (0,0,0,0,6); Sınır-yarıçapı: 100px / 10px;)

.Block:% 40; dolgu: 1EM; marjı: 2EM 10 piksel 4EM; arka plan: #fff; kutu-gölge: 0 1px 4px rgba (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) inset;) .block: Daha önce, .Block: Sonra (içerik: ""; pozisyon: mutlak; z-index: -2;) .Block: önce (üst: 0px; alt: 0px; sol: 10px; sağ: 10px ; Kutu-gölge: 0 15px RGBA (0,0,0,0,0,6); Sınır-yarıçapı: 100px / 10px;)

Döndürülmüş blok için CSS3 Gölge. Örneği görüntüle.

.Block:% 40; Dolgu: 1EM; Marj: 2EM 10px 4EM; Arka Plan: #FFF; Sınır-yarıçapı: 4px; Kutu-Gölge: 0 1PX 4PX RGBA (0, 0, 0, 0,3) 0 0 40px RGBA (0 , 0, 0, 0.1) Inset; Kutu-Gölge: Yok; Dönüştürme: Döndür (-3deg);) .Block\u003e: Birinci Çocuk: Önce (İçerik: "; Konum: Mutlak; Z-Dizin: -1; Üst : 0px; alt: 0; sol: 0; sağ: 0px; arka plan: #fff; kutu-gölge: 0 1px 4px rgba (0, 0, 0, 0,3), 0 0 40px rgba (0, 0, 0, 0,1 ) İnset;) .block: önce, .Block: sonra (içerik: "; pozisyon: mutlak; z-index: -2; alt: 15px; sol: 10px; genişlik:% 50; yükseklik:% 20; maksimum genişlik : 300px; Kutu gölgesi: 0 15px 10px RGBA (0, 0, 0, 0.7); Dönüştür: Döndür (-3deg);) .Block: Sonra (sağ: 10px; sol: Otomatik; Dönüştürme: Döndürme (3DEG); )

Kayıt prosedürü temel olarak önemlidir. İlk anlam, her zaman x ekseni boyunca, ikinci - Y ekseni boyunca dengelenir.

Eksenlerden biri yer değiştirmeye ihtiyaç duymazsa, sıfır koyun:

Sınıf (kutu-gölge: 0 8px;) - Gölgeyi yalnızca Y ekseni boyunca kaydırın

Sonuç

Sınıf (kutu-gölge: 8px 8px;) - her iki eksende de vardiya

Sonuç

Kutu gölge eksenleri için negatif değer

Gölge ters yönde kayar:

Sınıf (kutu-gölge: -8px 8px;) - Gölgeyi x ekseni boyunca negatif bir değere kaydırın

Sonuç

Gölge Yarıçapı Bulanıklığı

Üçüncü Özellikler parametresi kutu gölge. Belirtilmemişse, değer 0'dır ve gölge boyutu, uygulandığı öğenin boyutuna eşittir.

Sınıf (kutu-gölge: 0 48px 0;) - gölge uygulandığı öğenin boyutlarını kopyalar

Sonuç

Değer sıfırdan büyük olduğunda, kenarlar açıklık kaybeder, gölge daha fazla ve görsel olarak daha hafif hale gelir. Bulanıklık her taraftan geçerlidir:

Sınıf (kutu-gölge: 0 8px;) - ofset olmadan, sadece bulanıklık

Sonuç

Sınıf (kutu-gölge: 0 8px 8px;) - Y ekseni üzerinde vardiya ve bulanıklaştırma

Sonuç

Negatif değer bir hata olarak kabul edilir ve gölge hiç görünmeyecektir.

Gölge Gölgeli Yarıçapı

Dördüncü özellik parametresi kutu gölge. Gölgenin miktarını elemana göre değiştirir. Her yöne doğru uzanır:

Sınıf (kutu-gölge: 0 0 0 8px;) - yer değiştirmeden ve bulanıklık olmadan, sadece germe

Sonuç

Bu durumda, gölge, genişlik ve yükseklikte 16 piksel üzerindeki elemandan daha büyüktür: sağdaki sol + 8px üzerinde 8px ve 8px aşağıdan + 8px yukarıdan 8px.

Gölgenin CSS'de Germe Olumsuz Değeri

Gölge gerilmez, ancak her taraftan belirtilen değere daralır:

Sınıf (kutu-gölge: 0 16px 0 -8px;) - Negatif bir değerin gölgesini azaltmak

Sonuç

Renk gölge

Varsayılan olarak, gölge rengi yazı tipinin rengini kopyalar: yukarıdaki örneklerde olduğu gibi.

Gölgenin rengi mevcut herhangi bir CSS formatında belirtilir:

• # Ff0009
• rGB (255, 0, 9)
• hSL (358,% 100,% 50);

Öğeyi mavi gölgeye ayarlayalım:

Sınıf (kutu-gölge: 0 8px # 3A8fe7;)

Sonuç

İç gölge

Parametre İnset. Gölgeyi bloğun içinde görüntüler.

Yukarıda listelenen parametrelerin aksine, sert bir kelime yazısı yoktur. Her iki seçenek de bir sonuç verecektir:

Kutu gölgesi: 0 8px # 3A8fe7 Inset; Kutu gölgesi: inset 0 8px # 3A8fe7;

Sonuç

İkinci seçenek, kodu okurken algı için daha uygundur.

Birkaç gölge

Virgül aracılığıyla birkaç gölge ayarlanır. Yukarıdan aşağıya doğru görüntüleme prosedürü:

Sınıf (kutu-gölge: 0 8px # 3A8fe7, 0 16px # 3ae7af;)

Sonuç

Yerleri değiştirirseniz, mavi gölge görünmeyecek:

Sınıf (kutu-gölge: 0 16px # 3ae7af, 0 8px # 3A8fe7;)

Sonuç

Aynı zamanda, iç ve dış gölge verilir:

Sınıf (kutu-gölge: 0 16px # 3AE7AF, INSET 0 8PX # 3A8FE7;)

Sonuç

Köşeleri yuvarlatılmış gölge

Öğe özelliği ayarladıysa sınır yarıçapı., Gölge yuvarlatılmış köşelerde olacak.

Sınıf (kutu-gölge: 0 16px # 3A8fe7; sınır yarıçapı: 8px;)

Sonuç

Gölgenin gerilmesinin ayarlanması, arttıkça ve yuvarlanıyoruz. Örneğin, kenarlık-yarıçapı 8px ve gölgeyi germe - 4.

8 + 4 \u003d 12px gölgenin bir yarıçapıdır.

Sınıf (kutu-gölge: 0 16px 0 4px # 3A8fe7; sınır yarıçapı: 8px;)

Sonuç

Aynı ilke, değer negatif olduğunda gölgenin sıkıştırılması için de geçerlidir.

8 + (- 4) \u003d 4px - İki kat daha az bir yuvarlama gölgesi alıyoruz.

Gölge sıkıştırma sınır yarıçapından büyükse, düz köşelerde bir gölge alın. Örneğin, sıkıştırma 16px.

8 + (- 16) \u003d (- 8), ancak yuvarlama negatif bir değer olamaz ve sıfır geçerli olacaktır.

Sınıf (kutu-gölge: 0 24px 0 -16px # 3A8fe7; sınır yarıçapı: 8px;)

Sonuç

CSS özelliği kutu gölge Opera Mini hariç tüm popüler tarayıcılar tarafından desteklenir.