Ciri pemaparan CSS: bayang kotak, bayang teks dan penapis

Sifat pemaparan CSS: bayangan kotak, bayangan teks dan penapis

Dalam pembangunan web moden, reka bentuk antara muka yang cantik dan pengalaman pengguna adalah amat penting. CSS (Cascading Style Sheets) ialah bahasa helaian gaya yang digunakan untuk menerangkan pembentangan dokumen Sifat pemaparan boleh membantu pembangun mencapai pelbagai kesan. Artikel ini akan menumpukan pada tiga sifat pemaparan yang biasa digunakan: bayang-kotak, bayang-bayang teks dan penapis serta memberikan contoh kod khusus.

1. box-shadow
   sifat box-shadow digunakan untuk mencipta kesan bayang kotak di sekeliling elemen. Ia boleh menentukan kedudukan, saiz, warna dan kabur bayang-bayang. Berikut ialah contoh:

div {
  width: 200px;
  height: 200px;
  box-shadow: 10px 10px 5px grey;
}

Contoh ini mencipta bayang kotak kelabu yang diimbangi sebanyak 10 piksel pada elemen div dengan lebar dan ketinggian 200 piksel.

2. teks-bayangan
   teks-bayang-bayang digunakan untuk mencipta kesan bayang-bayang untuk teks. Sama seperti bayang-bayang kotak, ia membolehkan anda menentukan kedudukan, warna dan tahap kabur bayang-bayang. Berikut ialah contoh:

h1 {
  text-shadow: 2px 2px 2px black;
}

Contoh ini menambahkan kesan bayang-bayang hitam pada pengepala h1, diimbangi sebanyak 2 piksel.

3. penapis Atribut penapis membolehkan pembangun meningkatkan imej dengan mengubah kesan visual unsur. Ia boleh menggunakan pelbagai jenis kesan seperti kabur, pelarasan kecerahan, pelarasan kontras, dsb. Berikut ialah contoh:
   

img {
  filter: brightness(50%);
}

Salin selepas log masuk
Contoh ini melaraskan kecerahan imej kepada separuh nilai asalnya.
Ringkasnya, bayang-bayang kotak, bayang-bayang teks dan penapis adalah sifat pemaparan CSS yang sangat biasa digunakan Dengan pelarasan kod yang mudah, anda boleh menambah kesan bayang-bayang pada elemen dan mempertingkatkan imej. Pembangun boleh menggunakan atribut ini secara fleksibel mengikut keperluan dan kreativiti mereka untuk menjadikan antara muka lebih berkesan dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Ciri pemaparan CSS: bayang kotak, bayang teks dan penapis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!