Rumah > Artikel > hujung hadapan web > Tambah bayang pada imej menggunakan CSS3

Tambah bayang pada imej menggunakan CSS3

WBOYke hadapan: 2023-09-03 18:17:051189semak imbas

Untuk menambah bayang-bayang jatuh pada imej dalam CSS3, gunakan nilai bayang-bayang jatuh sifat penapis. Ia mempunyai nilai berikut -

h-bayang - Menentukan nilai piksel bayang mendatar.

v-shadow > – Menentukan nilai piksel bayang-bayang menegak. Nilai negatif meletakkan bayang di atas imej.

Kabur – Tambahkan kesan kabur pada bayang-bayang.

Diffusion - Nilai positif membuat bayang mengembang, nilai negatif membuat bayang mengecut.

Warna – Tambahkan warna pada bayang-bayang

Contoh

Demo langsung

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: brightness(120%);
   filter: contrast(120%);
   filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

Output

使用 CSS3 添加阴影到图像

Atas ialah kandungan terperinci Tambah bayang pada imej menggunakan CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css3

Kenyataan：

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

Artikel sebelumnya：Cara membuat carta kawasan menggunakan CSSArtikel seterusnya：Cara membuat carta kawasan menggunakan CSS

Artikel berkaitan

Lihat lagi