Rumah >hujung hadapan web >tutorial css >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:091202semak imbas
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!