Ah,
1. Fareyi web sayfasına götürürseniz yok olur = =
*{ imleç: yok!önemli; }2. Basit metin bulanıklığı efekti
*{ renk: şeffaf; metin-gölge: #111 0 0 5px; }![]()
3. Birden fazla sınır
.div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2); yükseklik: 200px; Kayır: 50px otomatik; genişlik: 400px}![]()
4. CSS'i gerçek zamanlı olarak düzenle
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. CSS'de basit işlemler
.div{ genişlik: kalkül (%100 - 500px); }![]()
6、sınır-yarıçapı
Çünkü temelde birçok kişi bunu böyle kullanıyor:
.div { sınır yarıçapı: 4px; }![]()
Biraz daha yüksek seviye şöyle:
.div { sınır yarıçapı: 4px 6px 6px 4px; }![]()
Ancak, nihai siyah teknoloji böyle kullanılır:
.div { sınır yarıçapı: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
sınır-yarıçapı 8 değer atanabilir:
Eğimin ön kısmı yatay yönü, arka tarafı ise dikey yönü etkiler.
Her sayı dört farklı yönü temsil eder.
7、outline-offset
CSS'yi girdi altında yazarken aşağıdaki ifadelere aşina olursunuz:
giriş { taslak : yok; }input:focus { outline : none; Varsayılan mavi tel çerçeveyi giriş giriş kutusundan nasıl çıkarabilirsiniz.
CSS'de ayrıca varsayılan tel çerçevenin mesafesini ayarlayabileceğiniz bir outline-offset özelliği vardır:
giriş { taslak-ofset: 4px ; }(Web ön uçu öğrenme değişim grubu: 328058344 Küçük sohbet yok, eğer hoşunuza gitmedikçe girmeyin! Özellik değerinin boyutunu ayarlayın, taslağın mesafe değişimini görebilirsiniz.
Son olarak, gerçek olmadan önce büyük beyazın demosunu sunacağım
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> gövde { arka plan: #595959; } #baymax{ /* merkeze ayarlanmış*/ kenar: 0 otomatik; /*yükseklik*/ yükseklik: 600px; /*taşmayı gizle*/ taşıntı: gizli; } #head{ yükseklik: 64px; genişlik: 100px; /*Yuvarlatılmış köşenin şeklini yüzde olarak tanımlayın*/sınır-yarıçapı: %50; /*arka plan*/ arka plan: #fff; Kenar: 0 otomatik; Alt kenar: -20px; /*Alt border'ın stilini ayarlayın*/ border-bottom: 5px solid #e0e0e0; /*öznitelik, elemanların üst üste yığma sırasını belirler; Daha yüksek yığın sırasına sahip elemanlar her zaman daha düşük yığın sırasına sahip öğelerin önünde olur*/ z-indeks: 100; /*Göreli konumlanmış elemanlar üret*/ konum: göreceli; } #eye, #eye2{ genişlik: 11px; boy: 13px; Arka plan: #282828; sınır yarıçapı: %50; konum: göreli; üst: 30px; sol: 27PX; /*elemanı döndür*/dönüştür: döndür(8derece); } #eye2{ /*Simetrik olarak dönmesini sağla*/ dönüşüm: döndür(-8derece); sol: 69px; üst: 17px; } #mouth{ genişlik: 38px; yükseklik: 1.5px; Arka plan: #282828; konum: göreli; sol: 34px; üst: 10px; } /*Gövde ve karın*/ #torso, #belly{ kenar: 0 otomatik; } yükseklik: 200px; genişlik: 180px; Arka plan: #fff; sınır yarıçapı: %47; /*Set border*/ border: 5px solid #e0e0e0; border-top: yok; z-indeksi: 1; } #belly{ yükseklik: 300px; genişlik: 245px; kenar üst: -140px; z-indeksi: 5; } #cover{ genişlik: 190px; Arka plan: #fff; yükseklik: 150px; Kenar: 0 otomatik; konum: göreli; Üst: -20px; sınır yarıçapı: %50; } /*kalp*/ #heart{ width:25px; yükseklik: 25px; sınır yarıçapı: %50; konum:akraba; /*Sınır etrafında gölge efektleri ekle*/ kutu-gölge:2px 5px 2px #ccc inset; sağ:-115px; üst:40px; z-index:111; border:1px sağlam #ccc; } /*kol*/ #left-kol, #right-kol{ yükseklik: 270px; genişlik: 120px; sınır yarıçapı: %50; Arka plan: #fff; Kenar: 0 otomatik; konum: göreli; üst: -350px; sol: -100px; dönüştür: döndür(20°); z-indeksi: -1; } #right-arm{ dönüşüm: döndür(-20derece); sol: 100px; üst: -620px; } /*parmak*/ #l-büyük parmak, #r-büyük parmak{ yükseklik: 50px; genişlik: 20px; sınır yarıçapı: %50; Arka plan: #fff; konum: göreli; üst: 250px; Sol: 50PX; dönüşüm: döndür(-50derece); } #r-bigfinger{ sol: 50px; dönüştür: döndür(50derece); } #l-küçük parmak, #r-küçük parmak{ yükseklik: 35px; genişlik: 15px; sınır yarıçapı: %50; Arka plan: #fff; konum: göreli; üst: 195px; sol: 66PX; dönüşüm: döndür(-40derece); } #r-smallfinger{ arka plan: #fff; dönüşüm: döndür(40°); üst: 195px; sol: 37PX; } /*uyluk*/ #left-bacak, #right-bacak{ yükseklik: 170px; genişlik: 90px; sınır yarıçapı: %40, %30, %10px %45; Arka plan: #fff; konum: göreli; üst: -640px; sol: -45px; dönüşüm: döndür(-1°); z-indeksi: -2; Kenar: 0 otomatik; } #right-bacak{ arka plan: #fff; sınır yarıçapı: %30, %40, %45, 10px; Kenar: 0 otomatik; üst: -810px; Sol: 50PX; dönüşüm: döndür(1°); </style><body> } <div id="baymax"> <!-- Kafayı tanımlayın, iki göz dahil, mouth --> <div id="head"> <div id="eye"></div> <div id="eye2"></div> <div id="mouth"></div> </div> <!-- Gövdeyi, kalbi de dahil olmak üzere tanımlayın --> <div id="torso"> <div id="kalp"></div> </div> <!-- Karın, karın kısmını, kapağı (ve gövdenin birleşimi dahil) dahil olmak üzere tanımlayın --> <div id="göbek"> <div id="örtü"></div> </div> <!-- Sol kolu tanımlayın, iki parmak, biri büyük ve biri küçük --> <div id="sol kol"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div> <!-- Sağ kolu tanımlayın, bu kol ayrıca bir büyük ve bir küçük parmak da içerir --> <div id="sağ kol"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> <!-- sol bacağı tanımlayacak --> <div id="sol-bacak"></div> <!-- sağ bacağı tanımlıyor --> <div id="sağ bacak"></div> </div></body><html>![]()
|
Yayınlandı 4.12.2017 20:24:39
|
|
|
|
Yayınlandı 5.12.2017 09:10:05
|
Yayınlandı 5.12.2017 09:21:19
