Gunakan Html5 dan CSS untuk mendapatkan efek bayangan teks

Dua hari yang lalu, seorang gadis cantik yang sedang belajar front-end HTML5 bertanya kepada saya tentang cara mencapai efek bayangan teks. Dia bercerita tentang text-shadow. Dia juga tahu tentang text-shadow, tapi dia tidak bisa membuatnya terlihat seperti yang dia inginkan. Faktanya, fitur baru CSS3 sangat kuat. Oke, gosip. Tanpa basa-basi lagi, mari kita lihat bayangan teks ini terlebih dahulu.

text-shadow Parameter bayangan teks: Parameter 1: Nilai panjang pertama digunakan untuk mengatur nilai offset horizontal bayangan objek. Bisa negatif Parameter 2: Nilai panjang kedua digunakan untuk mengatur nilai offset vertikal bayangan objek. Bisa negatif Parameter 3: Jika nilai panjang ketiga disediakan, ini digunakan untuk mengatur nilai keburaman bayangan objek. Nilai negatif tidak diperbolehkan Parameter 4: Mengatur warna bayangan objek

bayangan-teks: 10px 10px 50px #000;

Bagaimana kita bisa mencapai efek seperti gambar di atas?

Struktur HTML Gaya CSS Gaya Font Warna Font Bayangan Teks Lalu mari kita lihat kode spesifiknya:

HTML:

 <div class=text>[Ribuan emosi] Shang Xuetang</div>

CSS:

 .text{ font: tebal 100px/1.5 'Microsoft Yahei'; warna: dodgerblue;/*text-shadow*/ text-shadow: 10px 10px 50px #000; /*text-shadow: 10px 10px 50px #000,-10px - 10px 50px #f00;*/}

Sekarang mari kita lihat bagaimana melakukan efek dari si cantik kecil yang bertanya padaku di bagian depan..

Sebenarnya sangat mudah, yuk langsung ke kodenya~

HTML:

 <div class=text>[Ribuan emosi] Shang Xuetang</div>

CSS:

 body { latar belakang: #000; warna: #fff;}.teks{ font: tebal 100px/1.5 georgia, sans-serif;/*Warna berbeda, ukuran buram dengan beberapa nilai berbeda*/ bayangan teks: 0 0 10px #fff , 0 0 20 piksel #fff, 0 0 30 piksel #fff, 0 0 40 piksel #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}

Sebarkan pemikiran Anda. Faktanya, gaya CSS3 sangat menarik. Terkadang sedikit perubahan saja dapat menghasilkan efek yang sangat keren^.^

Di atas adalah pengenalan editor tentang penggunaan Html5 dan CSS untuk mencapai efek bayangan teks. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!