Wie kann ich einen abgerundeten Umrisseffekt für ein Div-Element erstellen?

Simulieren eines abgerundeten Umrisses auf einem Div-Element

Während die Eigenschaft border-radius abgerundete Ecken am Rand eines Div-Elements ermöglicht, Es bietet keine Lösung für einen abgerundeten Umriss.

Es gibt jedoch eine clevere Problemumgehung mithilfe der Box-Shadow-Eigenschaft. Das folgende Beispiel zeigt, wie man einen glatten, abgerundeten Umrisseffekt erzeugt:

input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline-color: transparent; /* for high contrast modes */
    transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

/* Hard "outline" with box-shadow: */
.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

In diesem Beispiel erzeugt die Box-Shadow-Eigenschaft einen subtilen Schatten um das Eingabefeld. Indem Sie den Ausbreitungsradius auf Null setzen, wird der Schatten auf den Rand des Elements beschränkt, wodurch ein umrissähnlicher Effekt entsteht.

Die Klassen „text1“ und „text2“ passen den Umriss weiter an, indem sie den Ausbreitungsradius und die resultierende Farbe ändern entweder in einer glatten oder scharfkantigen Kontur.

Diese Technik bietet eine flexible und elegante Lösung zum Erzielen abgerundeter Konturen auf div-Elementen.

Das obige ist der detaillierte Inhalt vonWie kann ich einen abgerundeten Umrisseffekt für ein Div-Element erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!