Bagaimana untuk menetapkan bayangan imej dalam css-tutorial css-php.cn

Bagaimana untuk menetapkan bayangan imej dalam css

青灯夜游

Lepaskan： 2021-11-11 16:14:26

asal

18753 orang telah melayarinya

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.

Bagaimana untuk menetapkan bayangan imej dalam css

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>

Salin selepas log masuk

Bagaimana untuk menetapkan bayangan imej dalam css

2. Gunakan penapis:drop-shadow()

Atribut penapis mentakrifkan kesan visual (seperti kabur dan tepu) elemen (biasanya Bagaimana untuk menetapkan bayangan imej dalam css ).

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>

Salin selepas log masuk

Bagaimana untuk menetapkan bayangan imej dalam css

(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!