suchen

Heim  >  Artikel  >  Web-Frontend  >  So erzielen Sie mit CSS einen Bildkantenunschärfeeffekt

So erzielen Sie mit CSS einen Bildkantenunschärfeeffekt

WBOY
WBOYOriginal
2021-11-30 15:44:5211354Durchsuche

In CSS können Sie das Attribut „Box-Shadow“ verwenden, um den Unschärfeeffekt am Rand des Bildes zu erzielen. Sie müssen nur den Stil „Box-Shadow:0 0 Blur Distance Shadow Size #ffffff Inset;“ hinzufügen zum Bildelement.

So erzielen Sie mit CSS einen Bildkantenunschärfeeffekt

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So erzielen Sie einen Bildkanten-Unschärfeeffekt mit CSS

Wir können einen Bildkanten-Unschärfeeffekt durch das Box-Shadow-Attribut erzielen.

Die Syntax dieses Attributs lautet wie folgt: 

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

Unter anderem fügt das Box-Shadow-Attribut der Box einen oder mehrere Dropdown-Schatten hinzu. Diese Eigenschaft ist eine durch Kommas getrennte Liste von Schatten, die jeweils durch 2–4 Längenwerte, einen optionalen Farbwert und ein optionales Einfügungsschlüsselwort angegeben werden. Der Wert für die ausgelassene Länge ist 0.

So erzielen Sie mit CSS einen Bildkantenunschärfeeffekt

Schauen wir es uns anhand eines Beispiels an. Das Beispiel sieht wie folgt aus: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
    .img-edge-cover {
    width: 180px;
    height: 180px;
    position: relative;
}
.img-edge-cover:after {
    position: absolute;
    content: &#39;&#39;;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow:0 0 50px 30px #ffffff inset;
}
.img-edge-cover img{
    width: 180px;
    height: 180px;
    display: block;
    margin-bottom: 20px;
}
    </style>
<div class="img-edge-cover">  
  <img src="1118.02.png" alt="photo">
</div>
</body>
</html>

Ausgabeergebnis:

So erzielen Sie mit CSS einen Bildkantenunschärfeeffekt

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS einen Bildkantenunschärfeeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So legen Sie die Breite des Tabellenrahmens in CSS festNächster Artikel：So legen Sie die Breite des Tabellenrahmens in CSS fest

In Verbindung stehende Artikel

Mehr sehen