Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan kesan bayangan pada teks menggunakan CSS?

Bagaimana untuk menggunakan kesan bayangan pada teks menggunakan CSS?

王林ke hadapan: 2023-08-23 23:17:091160semak imbas

如何使用 CSS 在文本上应用阴影效果？

Kami boleh menggunakan kesan bayangan pada elemen teks menggunakan sifat "text-shadow" yang disediakan oleh CSS. Sifat "text-shadow" menerima senarai nilai yang mewakili X dan Y ofset bayang-bayang berbanding dengan elemen, jejari kabur bayang-bayang dan warna bayang-bayang. Nilai disenaraikan dalam sintaks di bawah -

Tatabahasa

text-shadow: offset_y offset_x blur-radius color

Berikut ialah senarai nilai dan maknanya -

Offset-x − Ia mewakili jarak bayang-bayang daripada unsur dalam arah mendatar
Offset-y − Ia mewakili jarak bayang-bayang daripada unsur dalam arah menegak
Jejari Kabur − Ia mewakili kelegapan bayang-bayang
Warna − Ia mewakili warna bayang-bayang

Contoh 1

Dalam contoh ini kita akan menggunakan kesan bayang-bayang pada elemen "h3" dan memberikan bayang-bayang itu mengimbangi y serta warna merah

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Apply Shadow Effect on Text Using CSS?</title>
   <style>
   h3 {
      text-shadow: 0 15px 0 red;
   }
   </style>
</head>
<body>
   <h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>

Contoh 2

Dalam contoh ini, kami akan menggunakan kesan bayang-bayang pada elemen "h3" dan memberikan bayang-bayang itu offset y, x offset, ketelusan dan warna hijau.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Apply Shadow Effect on Text Using CSS?</title>
   <style>
      h3 {
         text-shadow: 10px 15px 5px green;
      }
   </style>
</head>
<body>
   <h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>

Kesimpulan

Dalam artikel ini, kami mempelajari tentang sifat "bayang-teks" dan menggunakan kesan bayang-bayang pada elemen teks menggunakan CSS, ditunjukkan melalui 2 contoh berbeza. Dalam contoh pertama, kami menggunakan kesan bayangan menegak dengan warna "merah", manakala dalam contoh kedua kami menggunakan kesan bayangan menegak dan mendatar dengan warna "hijau" dan jejari kabur 5px .

Atas ialah kandungan terperinci Bagaimana untuk menggunakan kesan bayangan pada teks menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Peranan sprite imej CSSArtikel seterusnya：Peranan sprite imej CSS

Artikel berkaitan

Lihat lagi