Bayangan teks-bayang teks CSS3
Penjelasan terperinci tentang penggunaan atribut CSS3 text-shadow:
Sebelum ini, jika anda menetapkan kesan bayang teks, anda biasanya memerlukan alatan lain, seperti menggunakan Photoshop untuk mencipta imej responsif Sukar untuk dicapai hanya dengan menggunakan CSS Kini CSS3 menyediakan atribut teks-bayang yang membolehkan kita mencapai kesan yang tidak mungkin sebelum ini.
Struktur tatabahasa:
Dalam tutorial yang berbeza, struktur tatabahasa ditulis dalam bentuk yang berbeza Secara ringkasnya, semuanya menyatakan maksud yang sama, jadi kami memilih yang paling mudah difahami:
text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]....
Nota sintaks:
1 Warna: mewakili nilai warna bayang-bayang.
Paksi 2.x: mengimbangi mendatar, unit ialah piksel.
paksi-3.y: diimbangi dalam arah menegak, unit ialah piksel.
4. Jejari kabur: julat pengaruh bayang-bayang. Semakin besar nilainya, semakin kabur.
Susunan kata kunci bagi struktur tatabahasa di atas juga boleh mempunyai bentuk kedua:
text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...
Warna bayang boleh berada di hadapan atau di hujung.
Contoh kod:
tunjuk cara mengimbangi paksi-x:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 300px 0px 0px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>Kod di atas boleh menetapkan offset mendatar teks kepada 300px dan bayang-bayang warna hijau.
Demonstrasi mengimbangi paksi-Y:
Kod di atas boleh menetapkan mengimbangi menegak teks kepada 60px dan warna bayang-bayang kepada hijau.
Demonstrasi kod penuh:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 0px 60px 1px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>Bayang-bayang berbilang lapisan:
Rujukan yang dipanggil berbilang lapisan adalah untuk menggunakan gaya bayang-bayang pada teks, dan kemudian Pisahkan dengan koma.
Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 10px 20px 5px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
