CSS -Kreis mit Rand

Formen werden häufig im Web -Design verwendet. Insbesondere wird die Kreisform verwendet, um die Aufmerksamkeit des Benutzers zu erregen und etwas hervorzuheben, z. B. Profilbilder sind größtenteils in einen Kreisrahmen eingebettet. CSS bietet mehrere Styling -Eigenschaften für die Elemente, damit sie für die Anwendung wie die “besser aussehenGrenzradiusImmobilien werden verwendet, um die Kanten des Elements rund zu machen und die “GrenzeDie Eigenschaft legt den Rand des Elements fest.

Diese Beschreibung wird Sie anweisen:

• So schafft man einen Kreis mit Rand in CSS?
• So fügen Sie Farbe im umrandeten Kreis mit CSS hinzu?
• So stellen Sie den Randstil eines Kreises mit CSS ein?

So schafft man einen Kreis mit Rand in CSS?

Um einen Kreis mit einem Rand in CSS zu schaffen, wird zunächst die Grenzeigenschaft verwendet, um den Rand um das Element umzusetzen. Der "GrenzradiusEigenschaft wird verwendet, um die randkreisförmige Form zu erstellen.

Gehen Sie zu diesem Zweck das angegebene Beispiel durch.

Erstellen Sie eine HTML -Datei

Zuerst fügen Sie eine "hinzu""Element und zuweisen Sie ihm eine Klasse"Kreis-div”:

Stil „Circle-Div“ -Klasse

Greife auf ... zu ""Container mit Hilfe der angegebenen Klasse".Kreis-div”Und wenden Sie die folgenden Eigenschaften an:

.Kreis-div
Breite: 200px;
Höhe: 200px;
Grenzradius: 50%;
Grenze: 5px Solid RGB (119, 0, 255);

Hier:

• “BreiteGibt die Breite des Kreises an.
• “Höhe”Bestimmt die Größe des Kreises.
• “Grenzradius"Mit dem Wert"50%”Bedeutet den Kreisrand.
• “Grenze”Wird verwendet, um einen Rand mit der angegebenen Randbreite, Stil und Farbe anzuwenden.

Ausgang

So fügen Sie Farbe im umrandeten Kreis mit CSS hinzu?

Das CSS “HintergrundfarbeDie Eigenschaft wird verwendet, um dem Kreis wie folgt Farbe hinzuzufügen:

Hintergrundfarbe: Leuchtding;

Ausgang

So stellen Sie den Randstil eines Kreises mit CSS ein?

Indem wir den Grenzstil angeben, können wir den Rand des Kreises stylen. Einige häufig verwendete Grenzstile sind unten aufgeführt:

• Gepunktet
• Solide
• Rille
• Einsatz
• Anfang
• Doppelt

Gepunktete Grenze

Setzen Sie den Grenzstil auf “gepunktet”Um den gepunkteten Rand anzugeben:

Grenze: 5px gepunktete RGB (252, 87, 170);

Ausgang

Groove -Grenze

Wenden Sie den Grenzstil an “Rille”In der Grenzbesitz:

Grenze: 10px Groove RGB (187, 181, 226);

Ausgang

Wir haben erfolgreich gezeigt, wie man den umrandeten Kreis in CSS erstellt und stymt.

Abschluss

Um einen Kreis mit Grenzen zu schaffen, werden zwei wichtige CSS -Eigenschaften verwendet. Um einen Rand zu erstellen, fügen Sie zunächst einen „DIV“ -Container hinzu und greifen Sie in CSS mit seiner jeweiligen Klasse darauf zu. Wenden Sie dann die CSS an “Grenzradius"Eigenschaft und passen Sie es an" an "50%"Um einen Kreis und das CSS zu schaffen"GrenzeDie Eigenschaft wird verwendet, um einen Rand um den Kreis zu setzen. Dieser Blog hat die Methode zum Erstellen eines Kreises mit Grenzen in CSS erklärt.