Wie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele)-CSS-Tutorial-php.cn

Wie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele)

青灯夜游

Freigeben： 2018-10-18 14:00:52

Original

52808 Leute haben es durchsucht

CSS kann viele Bildeffekte erzielen, und der Bildschatteneffekt ist einer davon. Wie fügt man Bildern in CSS einen Schatteneffekt hinzu? In diesem Artikel erfahren Sie, wie Sie mit CSS (mit Code) Schatten zu Bildern hinzufügen und erfahren, wie Sie mit CSS Schatten zu Bildern hinzufügen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Schauen wir uns zunächst an, wie man mit CSS einen Schatteneffekt zu einem Bild hinzufügt. Die erste Methode: Legen Sie das Box-Shadow-Attribut fest und sehen Sie sich die Implementierung des Box-Shadow-Attributs an durch eine einfache Codebeispielmethode.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 图片阴影--box-shadow属性</title>
		<style>
			.demo{
				width: 400px;
				height: 300px;
				margin: 50px auto;
			}
			.demo 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>
		<div class="demo">
			<img  src="Wie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele)" / alt="Wie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele)" >
		</div>
	</body>
</html>

Nach dem Login kopieren

Rendering:

Wie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele)

Ist es sehr einfach, den Bildschatten mit dem Box-Shadow-Attribut festzulegen? Schauen wir uns an, wie man den Rahmen einstellt -shadow-Attribut. von:

box-shadow: h-shadow v-shadow blur spread color inset;

Nach dem Login kopieren

h-shadow: Erforderlicher Wert, der die Position des horizontalen Schattens definiert. Negative Werte sind erlaubt.

V-Schatten: Ein erforderlicher Wert, der die Position des vertikalen Schattens definiert. Negative Werte sind erlaubt.

Unschärfe: Optionaler Einstellungswert, der den Unschärfeabstand definiert.

Spread: Optionaler Einstellungswert, der die Größe des Schattens definiert.

Farbe: optionaler Wert, der die Farbe des Schattens definiert. Wenn kein Wert festgelegt ist, basiert der Farbwert auf der Browseranzeige. Es wird empfohlen, ihn festzulegen.

Einsatz: Der Wert der optionalen Einstellung. Nach dem Einstellen kann der äußere Schatten (Anfang) in den inneren Schatten geändert werden.

Als nächstes werfen wir einen Blick auf die zweite Methode zum Hinzufügen von Schatteneffekten zu Bildern mithilfe von CSS : Verwenden Sie das Filterattribut von CSS3 -----Filterattribut , um den Bildschatten festzulegen.

Sie können filter:drop-shadow(); festlegen, um dem Bild einen Schatten hinzuzufügen. Sehen wir uns anhand eines einfachen Codebeispiels an, wie dies implementiert wird.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 图片阴影--box-shadow属性</title>
		<style>
			.demo{
				width: 400px;
				height: 300px;
				margin: 50px auto;
			}
			.demo 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>
		<div class="demo">
			<img  src="Wie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele)" / alt="Wie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele)" >
		</div>
	</body>
</html>

Nach dem Login kopieren

Rendering:

Wie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele)

Anweisungen:

filter:drop-shadow(h-shadow v-shadow blur spread color);

Nach dem Login kopieren

h-shadow: Legen Sie den horizontalen Versatz des Schattens fest zulässig, negative Werte führen dazu, dass der Schatten auf der linken Seite des Elements erscheint.

V-Shadow: Legt den vertikalen Versatz des Schattens fest; negative Werte sind zulässig, und negative Werte führen dazu, dass der Schatten über dem Element erscheint.

Unschärfe: Je größer der Wert, desto größer und heller wird der Schatten. Wenn nicht, ist die Standardeinstellung zulässig 0 (die Grenze des Schattens ist sehr klein).

Spread: Legen Sie die Größe des Schattens fest. Positive Werte bewirken, dass der Schatten größer wird, während negative Werte dazu führen, dass der Schatten kleiner wird. Wenn nicht festgelegt, ist der Standardwert 0. der Schatten hat die gleiche Größe wie das Element).
Hinweis: Spread wird in Webkit und einigen anderen Browsern nicht unterstützt und wird nicht gerendert, wenn es hinzugefügt wird.

Farbe: Legen Sie die Schattenfarbe fest. Wenn nicht, basiert der Farbwert auf dem Browser. Es wird empfohlen, die Farbe festzulegen.

Zusammenfassung: Das Obige ist der vollständige Inhalt der beiden Methoden zum Hinzufügen von Schatten zu Bildern in CSS. Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter CSS3-Video-Tutorial , Html5-Video-Tutorial , Bootstrap-Video-Tutorial !

Das obige ist der detaillierte Inhalt vonWie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!