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:3218747semak 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.

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>

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>

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn