Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan bayangan imej dalam css
Bagaimana untuk menetapkan bayangan imej dalam css
- 青灯夜游asal
- 2021-11-10 16:41:3218763semak imbas
Kaedah tetapan: 1. Gunakan "kotak-bayang: bayang-bayang menegak sebaran kabur bayang-bayang mendatar;" 2. Gunakan "penapis: bayang-bayang bayang mendatar bayang-bayang sebaran warna kabur)" kenyataan.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Terdapat dua cara untuk menetapkan bayang imej dalam css:
atribut bayang-kotak
penapis:bayang-bayang titisan ( )
Izinkan saya memperkenalkan kepada anda
1 Gunakan atribut box-shadow
atribut box-shadow untuk tambah pada kotak Satu atau lebih bayang-bayang.
Sintaks: box-shadow: h-shadow v-shadow blur spread color inset;
h-bayangan Diperlukan. Kedudukan bayang mendatar. Nilai negatif dibenarkan.
v-shadow Diperlukan. Kedudukan bayang menegak. Nilai negatif dibenarkan.
kabur Pilihan. Jarak kabur.
sebarkan Pilihan. Saiz bayang.
warna Pilihan. Warna bayang. Lihat nilai warna CSS.
inset Pilihan. Tukar bayang luar (permulaan) kepada bayang dalam.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img {
box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
/*考虑浏览器兼容性*/
-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="Bagaimana untuk menetapkan bayangan imej dalam css" >
</body>
</html>
2. Gunakan penapis:drop-shadow()
Atribut penapis mentakrifkan kesan visual (seperti kabur dan tepu) elemen (biasanya ).
drop-shadow() boleh menetapkan kesan bayang-bayang pada imej. Bayang-bayang digubah di bawah imej dan boleh dikaburkan, mengimbangi versi matte yang boleh dicat dalam warna tertentu.
Sintaks: filter:drop-shadow(h-shadow v-shadow blur spread color);
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img {
-webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
/*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="Bagaimana untuk menetapkan bayangan imej dalam css" >
</body>
</html>
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk menetapkan bayangan imej dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!