Heim > Artikel > Web-Frontend > Fügen Sie dem Bild mit CSS3 Schatten hinzu

Fügen Sie dem Bild mit CSS3 Schatten hinzu

WBOYnach vorne: 2023-09-03 18:17:051144Durchsuche

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

Beispiel

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>

Ausgabe

使用 CSS3 添加阴影到图像

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!

css3

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So erstellen Sie ein Flächendiagramm mit CSSNächster Artikel：So erstellen Sie ein Flächendiagramm mit CSS

In Verbindung stehende Artikel

Mehr sehen