Heim >Web-Frontend >CSS-Tutorial >Wie steuere ich den zufälligen abgerundeten Eckenstil von Bildern mit CSS? (Beispiel)
Wie steuere ich den zufälligen abgerundeten Eckenstil von Bildern mit CSS? (Beispiel)
- 藏色散人Original
- 2018-08-14 10:59:202679Durchsuche
In diesem Artikel wird hauptsächlich die Verwendung von CSS zum Erstellen abgerundeter Ränder auf Bildern vorgestellt.
1. Die linke Seite des CSS-Bildes wird abgerundet
Codebeispiel:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>css图片左边变成圆角</title>
<meta charset="UTF-8">
<style type="text/css">
.wrapper img {
border-top-left-radius:2em;
border-bottom-left-radius:2em;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="2.png" / alt="Wie steuere ich den zufälligen abgerundeten Eckenstil von Bildern mit CSS? (Beispiel)" >
</div>
</body>
</html>Der Effekt ist wie folgt:
2. Das CSS-Bild wird zentriert und der abgerundete Rand des CSS-Bildes wird angezeigt
Codebeispiel:
<!DOCTYPE HTML>
<html>
<head>
<title>css img 圆形角边示例</title>
<meta charset="UTF-8">
<style type="text/css">
.wrapper{
width: 200px;
height: 100px;
margin: 0 auto;
}
.wrapper img {
border-radius:2em;
}
</style>
</head>
<body>
<div>
<img src="2.png" / alt="Wie steuere ich den zufälligen abgerundeten Eckenstil von Bildern mit CSS? (Beispiel)" >
</div>
</body>
</html>Das Der Effekt ist wie folgt:
Das wichtige Attribut ist der Randradius. Durch dieses Attribut können die abgerundeten Ecken des Bildes erreicht werden.
Die Funktionen des Randradius-Attributs sind wie folgt:
Grenzradius: 2em, was bedeutet, dass alle vier Ecken abgerundet sind und der Radius jeder abgerundeten Ecke 2em beträgt.
Sie können zwei Werte festlegen, z. B. border-radius:2em2em; der erste Wert stellt die obere linke abgerundete Ecke und die untere rechte abgerundete Ecke dar, und der zweite Wert stellt die obere rechte abgerundete Ecke und die untere linke Ecke dar abgerundete Ecke.
Legen Sie 3 Werte fest, z. B. den Randradius: 2em 2em 2em; der erste Wert stellt die obere linke abgerundete Ecke dar, der zweite Wert stellt die obere rechte und untere linke abgerundete Ecke dar und der dritte Wert stellt die untere dar rechte abgerundete Ecke.
Legen Sie 4 Werte fest, z. B. den Randradius: 2em 2em 2em2em; die 4 Werte repräsentieren jeweils oben links, oben rechts, unten rechts und unten links.
Sie können die 4 Ecken auch in 4 separate Attribute aufteilen, die festgelegt werden sollen, z. B. obere linke Ecke (Rand-oben-links-Radius), obere rechte Ecke (Rand-oben-rechts-Radius) und untere rechte Ecke Ecke (Rand unten rechts-Radius) und untere linke Ecke (Rand unten links-Radius).
Das Obige ist eine Einführung in die Verwendung von CSS, um Bilder in abgerundete Ecken umzuwandeln, was einen gewissen Referenzwert hat. Ich hoffe, es wird Freunden in Not helfen.
[Empfohlene verwandte Artikel]
PHP generiert abgerundeten Bildcode
Der Vorgang des Hinzufügens abgerundeter Ränder zu div-Elementen Methode
CSS3-Kreis Detaillierte Erklärung der Ecke , Boxschatten- und Randbilder
Das obige ist der detaillierte Inhalt vonWie steuere ich den zufälligen abgerundeten Eckenstil von Bildern mit CSS? (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!