CSS Radius für Umriss festlegen

1. Verwenden Sie die CSS-Eigenschaft box-shadow anstelle der Eigenschaft outline, um den Radius für den Umriss festzulegen
2. Verwenden Sie den after-Selektor von CSS, um den Radius für den Umriss festzulegen
3. Verwenden Sie die Eigenschaften outline: auto und border-radius zusammen, um den Radius für den Umriss festzulegen

In diesem Artikel lernen Benutzer, wie man abgerundete Ecken für die Eigenschaft outline setzt, genauso wie die Eigenschaft border-radius. Hier haben wir die verschiedenen Methoden erklärt, um abgerundete Ecken auf die Eigenschaft outline anzuwenden.

Verwenden Sie die CSS-Eigenschaft box-shadow anstelle der Eigenschaft outline, um den Radius für den Umriss festzulegen

Wir können die CSS-Eigenschaft box-shadow anstelle der Eigenschaft outline verwenden. Es funktioniert ähnlich wie die Eigenschaft outline.

Wir haben das Element <div> erstellt, das im folgenden Beispiel Text enthält. Außerdem haben wir CSS auf das Element <div> angewendet.

Die Eigenschaft background legt die Hintergrundfarbe für das <div>-Element fest. Die CSS-Eigenschaften height und width werden verwendet, um die Höhe bzw. Breite des Elements festzulegen.

Die Eigenschaft border-radius macht abgerundete Ecken für das <div>-Element, und box-shadow wendet den Schatteneffekt auf das <div> an, das als Umriss fungiert.

Auf diese Weise können wir mit den Eigenschaften box-shadow und border-radius eine abgerundete Kontur für jedes HTML-Element erstellen.

HTML Quelltext:

<div>Welcome to DelftStack!</div>

CSS-Code:

div{
    background: yellow;
    height: 200px;
    width: 200px;
    border-radius: 10px;
    margin: 25px;
    padding: 20px;
    box-shadow: 0px 0px 0px 1px red inset;
}

Verwenden Sie den after-Selektor von CSS, um den Radius für den Umriss festzulegen

Benutzer können die Gliederung mithilfe des Selektors ::after und der Eigenschaft border-radius anstelle der standardmäßigen CSS-Eigenschaft outline erstellen. Wir können die Ecken des <div>-Elements mit der border-radius-Eigenschaft abgerundet machen.

Im folgenden Beispiel haben wir das Element <p> erstellt und darin etwas Text hinzugefügt. Wir haben CSS-Stile auf das Element <p> angewendet.

Wir haben für das Element <p> Hintergrund, Breite, Auffüllung, Farbe eingestellt, um es attraktiv zu machen. Außerdem haben wir den border-radius für das <p>-Tag gesetzt, um seine Ecke abzurunden, und position auf relative gesetzt, um andere Elemente entsprechend seiner aktuellen Position hinzuzufügen.

Danach haben wir den Selektor ::after mit dem Tag <p> verwendet, der es uns ermöglicht, nach dem Tag <p> Inhalte hinzuzufügen. Wir haben hier die leeren Texte nach dem <p>-Element hinzugefügt.

Außerdem haben wir den border-radius und border für die leeren Texte gesetzt.

Wir haben die Position des Randes des leeren Textes entsprechend der Position des Tags <p> eingestellt; deshalb haben wir position: absolute verwendet. Um den Rand als Umriss festzulegen, haben wir den Wert 0 für die CSS-Eigenschaften top, bottom, left und right verwendet, sodass border als Umriss funktioniert.

Hier können wir die Werte von top, bottom, left und right nicht setzen, ohne die Eigenschaft position: absolute zu verwenden.

HTML Quelltext:

<p>Hello Programmers!</p>

CSS-Code:

p{
    background: green;
    padding: 15px;
    border-radius: 5px;
    width: 300px;
    color: white;
    position: relative;
}
 p:after{
    content: "";
    display: block;
    border-radius: 5px;
    border: 2px solid red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Verwenden Sie die Eigenschaften outline: auto und border-radius zusammen, um den Radius für den Umriss festzulegen

Die Verwendung von auto als Wert der Eigenschaft outline ermöglicht es uns, einen benutzerdefinierten Umrissstil anzuzeigen, einschließlich abgerundeter Ecken.

In diesem Beispiel haben wir das Element <span> in HTML erstellt und Stile mit CSS angewendet. Wir haben die CSS-Eigenschaft outline: auto mit der Eigenschaft border-radius verwendet, die es uns ermöglicht, abgerundete Ecken für die Kontur zu erstellen.

HTML Quelltext:

<span>Here is the Outline.</span>

CSS-Code:

span{
    outline: auto blue;
    border-radius: 8px;
    background-color: red;
}

Von den in diesem Artikel angegebenen Methoden sollten wir andere CSS-Eigenschaften verwenden und einen benutzerdefinierten Umriss anstelle der Standard-CSS-Eigenschaften Umriss erstellen, um abgerundete Ecken für den Umriss zu erstellen. Wir können alle Änderungen an der benutzerdefinierten Gliederung vornehmen.