Wie steuere ich den zufälligen abgerundeten Eckenstil von Bildern mit CSS? (Beispiel)-CSS-Tutorial-php.cn

Wie steuere ich den zufälligen abgerundeten Eckenstil von Bildern mit CSS? (Beispiel)

藏色散人

Freigeben： 2018-08-14 10:59:20

Original

2681 Leute haben es durchsucht

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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie steuere ich den zufälligen abgerundeten Eckenstil von Bildern mit CSS? (Beispiel)

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>

Nach dem Login kopieren

Das Der Effekt ist wie folgt:

Wie steuere ich den zufälligen abgerundeten Eckenstil von Bildern mit CSS? (Beispiel)

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

Verwenden Sie HTML5 Canvas zum Zeichnen abgerundeter Rechtecke und einige verwandte Anwendungsbeispiele_HTML5-Tutorialfähigkeiten

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!