So erreichen Sie abgerundete Ecken von Bildern in CSS-CSS-Tutorial-php.cn

So erreichen Sie abgerundete Ecken von Bildern in CSS

藏色散人

Freigeben： 2023-01-04 09:37:37

Original

6680 Leute haben es durchsucht

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.

So erreichen Sie abgerundete Ecken von Bildern in CSS

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>

Nach dem Login kopieren

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!