suchen

Heim  >  Artikel  >  Web-Frontend  >  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:202640Durchsuche

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:

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>

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!

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 erzielen Sie mit reinem CSS einen beweglichen Animationseffekt für weiße KaninchenNächster Artikel：So erzielen Sie mit reinem CSS einen beweglichen Animationseffekt für weiße Kaninchen

In Verbindung stehende Artikel

Mehr sehen