Web-Frontend
CSS-Tutorial
Wie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele)
Wie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele)
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="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/168/638/459/1539834402154297.jpg" class="lazy" / alt="Wie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele)" >
</div>
</body>
</html>Rendering:
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;
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="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/763/722/108/1539841316558232.jpg" class="lazy" / alt="Wie füge ich Bildern mit CSS einen Schatteneffekt hinzu? Zwei Möglichkeiten, Bildern Schatten hinzuzufügen (Codebeispiele)" >
</div>
</body>
</html>Rendering:
Anweisungen:
filter:drop-shadow(h-shadow v-shadow blur spread color);
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
So sehen Sie das Datum der Bootstrap
Apr 07, 2025 pm 03:03 PM
ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.
