Erstellen Sie allgemeine Grafiken mit der Eigenschaft border-radius in CSS3

CSS3 hat viele neue Attribute hinzugefügt, von denen einige sehr praktisch sind, was nicht nur die Arbeitseffizienz verbessert, sondern auch die Seite schöner macht. Zum Beispiel können wir mit dem border-radius-Attribut in CSS3 einige häufig verwendete Grafiken zeichnen und so die Belastung für Künstler verringern. In diesem Artikel erfahren Sie, wie Sie mit dem Attribut border-radius einen perfekten Kreis, Halbkreis, Sektor und Bogen erstellen. Interessierte Freunde können einen Blick darauf werfen, ich hoffe, es kann Ihnen helfen.

1. Verwenden Sie den Randradius, um einen perfekten Kreis zu erstellen.

Die vier Werte des Randradius-Attributs stellen dar: obere linke Ecke, obere rechte Ecke Ecke, untere rechte Ecke, untere linke Ecke. Wenn nur ein Wert festgelegt ist, bedeutet dies, dass die vier Ecken gleich groß sind. Wenn wir einen Kreis zeichnen, müssen wir nur die vier Eckwerte auf die halbe Länge des Divs einstellen. Die Länge und Breite des Divs betragen jeweils 200 Pixel und die vier Eckwerte betragen 50 % (hier 100 Pixel). ). Der Code lautet wie folgt:

div{
    width: 200px;
    height: 200px;
    background: orangered;
    border-radius: 50%;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
   }

Effektbild:

2. Verwenden Sie border-radius, um einen Halbkreis zu erstellen

Halbkreis Die obere linke Ecke und die obere rechte Ecke sind abgerundete Ecken, und die untere rechte Ecke und die untere linke Ecke sind rechte Winkel. Stellen Sie die Werte in der oberen linken Ecke und der oberen rechten Ecke auf die halbe Länge des Div ein und lassen Sie die Werte in der unteren rechten Ecke und der unteren linken Ecke unverändert auf 0. Setzen Sie außerdem den Höhenwert auf die Hälfte Die ursprüngliche Höhe soll ein Standard-Halbkreis sein. Der Code lautet wie folgt:

div{
    width: 200px;
    height: 100px;
    background: red;
    border-radius: 100px 100px 0 0;
    line-height: 100px;
    text-align: center;
    font-size: 40px;
    }

Rendering:

3. Verwenden Sie den Randradius, um einen fächerförmigen

fächerförmig Die obere linke Ecke ist abgerundet und die anderen drei Ecken sind rechtwinklig. Stellen Sie einfach den Wert der oberen linken Ecke auf den gleichen Wert wie Breite und Höhe ein und lassen Sie die Werte der anderen drei Ecken unverändert (gleich 0). Der Code lautet wie folgt:

div{
    width: 200px;
    height: 200px;
    background: red;
    border-radius: 200px 0 0;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
   }

Rendering:

4. Verwenden Sie den Randradius, um einen Bogen zu erstellen

Bogen Seine beiden entgegengesetzten Winkel ändern sich, aber die anderen beiden entgegengesetzten Winkel bleiben unverändert. Stellen Sie die obere linke Ecke und die untere rechte Ecke auf denselben Wert wie die Breite und Höhe ein und lassen Sie die obere rechte Ecke und die untere linke Ecke unverändert (gleich 0). Fügen Sie außerdem ein Transformationsattribut hinzu, um es in einen flachen Bogen zu drehen. Der Code lautet wie folgt:

div{
    width: 200px;
    height: 200px;
    background: red;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
    border-radius: 200px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
   }

Rendering:

Das Obige stellt einige praktische Fähigkeiten des Attributs „border-radius“ in CSS3 vor, die wir verwenden können, wenn Beim Gestalten der Seite werden einige einfache Grafiken gezeichnet. Interessierte können es selbst ausprobieren, um zu sehen, ob sie andere schöne Effekte erzielen können.

Das obige ist der detaillierte Inhalt vonErstellen Sie allgemeine Grafiken mit der Eigenschaft border-radius in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!