Rumah > Artikel > hujung hadapan web > Buat bayang-bayang jatuh menggunakan CSS

Buat bayang-bayang jatuh menggunakan CSS

WBOYke hadapan: 2023-08-26 08:25:091536semak imbas

使用 CSS 创建衰减阴影

Penapis Bayangan digunakan untuk mencipta bayang jatuh dalam arah dan warna yang ditentukan. Parameter berikut boleh digunakan dalam penapis ini −

nombor siri245 = kanan atas 90 = kanan 180 = bawah

parameter dan penerangan	Warna teduh yang anda mahukan.
	ArahArah kabur, mengikut arah jam, dalam kenaikan 45 darjah. Nilai lalai ialah 270 (kiri). 0 = atas
135 = kanan bawah	225 = kiri bawah 270 = kiri 315 = kiri atas Contoh Anda boleh cuba jalankan kod berikut untuk melaksanakan penapis bayang − Demo <html> <head> </head> <body> <img src="/css/images/logo.png" alt="CSS Logo"style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div> </body> </html>

parameter dan penerangan

Warna teduh yang anda mahukan.

ArahArah kabur, mengikut arah jam, dalam kenaikan 45 darjah. Nilai lalai ialah 270 (kiri).

0 = atas

135 = kanan bawah

225 = kiri bawah 270 = kiri

315 = kiri atas

Contoh

Anda boleh cuba jalankan kod berikut untuk melaksanakan penapis bayang −

Demo

<html>
   <head>
   </head>

   <body>

      <img src="/css/images/logo.png" alt="CSS Logo"style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">

      <p>Text Example:</p>

      <div style="width: 357;
         height: 50;
         font-size: 30pt;
         font-family:
         Arial Black;
         color: red;
         Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div>
   </body>

</html>

Atas ialah kandungan terperinci Buat bayang-bayang jatuh menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css

Kenyataan：

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

Artikel sebelumnya：Pudar dalam kesan animasi menggunakan CSSArtikel seterusnya：Pudar dalam kesan animasi menggunakan CSS

Artikel berkaitan

Lihat lagi