Um einem Bild in CSS3 einen Schlagschatten hinzuzufügen, verwenden Sie den Schlagschattenwert der Filtereigenschaft. Es hat die folgenden Werte –
h-shadow – Gibt den Pixelwert des horizontalen Schattens an.
v-shadow > – Gibt den Pixelwert des vertikalen Schattens an. Bei negativen Werten wird der Schatten über dem Bild platziert.
Unschärfe – Fügen Sie Schatten einen Unschärfeeffekt hinzu.
Diffusion – Positive Werte lassen den Schatten größer werden, negative Werte lassen den Schatten schrumpfen.
Farbe – Farbe zu Schatten hinzufügen
Live-Demo
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
Das obige ist der detaillierte Inhalt vonFügen Sie dem Bild mit CSS3 Schatten hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die Installation von Windows 10 ist fehlgeschlagen
So legen Sie Linux-Umgebungsvariablen fest
So lassen Sie in einem HTML-Absatz zwei Leerzeichen leer
Im Gerätemanager gibt es keinen Netzwerkadapter
Treiber für Laptop-Soundkarte
Detaillierte Erläuterung des Ereignisses onbeforeunload
Was sind die häufig verwendeten Tastenkombinationen in WPS?
So stellen Sie den automatischen Zeilenumbruch in Word ein
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
