Heim > Artikel > Web-Frontend > So erreichen Sie abgerundete Ecken von Bildern in CSS

So erreichen Sie abgerundete Ecken von Bildern in CSS

藏色散人Original: 2020-12-18 09:21:276550Durchsuche

So implementieren Sie abgerundete Ecken in Bildern mit CSS: Erstellen Sie zunächst eine HTML-Beispieldatei, erstellen Sie dann ein div-Element und fügen Sie schließlich über das Attribut „border-radius“ von CSS3 abgerundete Ecken hinzu.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: „CSS-Video-Tutorial“

Abgerundete CSS-Ecken

css2.1 Das Hinzufügen abgerundeter Ecken zu Elementen ist eine sehr mühsame Sache. Die alte Methode besteht darin, Hintergrundbilder zu verwenden, was mehr ist mühsam zu machen. CSS3, das Attribut border-radius ermöglicht die perfekte Lösung des Attributs abgerundeter Ecken.

Syntax

Rahmenradius: Längenwert;

Anweisungen:

Der Längenwert kann px, Prozentsatz, em usw. sein.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆角实现</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div></div>
    
</body>
</html>

Rahmenradius festlegen: 10 Pixel; die vier festgelegten Verrundungsradien sind alle 10 Pixel

So erreichen Sie abgerundete Ecken von Bildern in CSS

Es gibt vier Möglichkeiten, den Attributwert „border-radius“ zu schreiben (ähnlich wie margin und padding)

(1) border-radius: ein Wert

Das Ergebnis ist wie oben gezeigt

(2) border- Radius: zwei Werte;

Zum Beispiel: Randradius: 10px 20px; bedeutet, dass die obere linke Ecke und die untere rechte Ecke 10px groß sind und die obere rechte Ecke und die untere linke Ecke 20px groß sind; 3) Randradius: Legen Sie drei Werte fest.

Zum Beispiel: Randradius: 10 Pixel, 20 Pixel, 30 Pixel. Gibt an, dass der Eckenradius der oberen linken Ecke, der oberen rechten Ecke, der unteren linken Ecke und der unteren linken Ecke 10 Pixel beträgt , 30px

Ergebnis

So erreichen Sie abgerundete Ecken von Bildern in CSS

(4) Randradius: Legen Sie vier Werte fest

Zum Beispiel: Randradius: 10px 20px 30px 40px; gibt an, dass der Eckenradius der oberen linken Ecke, der oberen rechten Ecke und der unteren ist Die rechte Ecke und die untere linke Ecke sind 10 Pixel, 20 Pixel, 30 Pixel und 40 Pixel

Das obige ist der detaillierte Inhalt vonSo erreichen Sie abgerundete Ecken von Bildern in CSS. 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 ändern Sie die Schriftfarbe von CSS-HyperlinksNächster Artikel：So ändern Sie die Schriftfarbe von CSS-Hyperlinks

In Verbindung stehende Artikel

Mehr sehen