Bayangan teks - Trik CSS

Anonim
p ( text-shadow: 1px 1px 1px #000; )

Anda boleh menggunakan banyak bayangan teks dengan memisahkan koma

p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )

Dua nilai pertama menentukan panjang ofset bayangan. Nilai pertama menentukan jarak mendatar dan yang kedua menentukan jarak menegak bayangan. Nilai ketiga menentukan radius kabur dan nilai terakhir menggambarkan warna bayangan:

1. nilai = Koordinat X
2. nilai = Koordinat Y
3. nilai = Jejari kabur
4. nilai = Warna bayangan

Menggunakan nombor positif sebagai dua nilai pertama berakhir dengan meletakkan bayangan di sebelah kanan teks secara mendatar (nilai pertama) dan meletakkan bayangan di bawah teks secara menegak (nilai kedua).

Nilai ketiga, radius kabur, adalah nilai pilihan yang dapat ditentukan tetapi tidak perlu. Jumlah piksel teks diregangkan yang menyebabkan kesan kabur. Sekiranya anda tidak menggunakan nilai ketiga, ia dianggap seolah-olah anda menentukan radius kabur nol.

Juga, ingat anda boleh menggunakan nilai RGBa atau HSLa untuk warna, sebagai contoh, ketelusan warna putih 40%:

p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )

Contoh

Lihat Contoh Bayangan Teks Kompleks Pen oleh Chris Coyier (@chriscoyier) di CodePen.

Maklumat lanjut

  • Dokumen MDN

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
2+ 1.1+ 3.5+ 9.5+ 10+ ada ada