简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

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

Fügen Sie dem Bild mit CSS3 Schatten hinzu

WBOY
WBOYnach vorne
2023-09-03 18:17:051189Durchsuche

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