Können Div-Elemente abgerundete Umrissecken haben?

Nehmen Div-Elemente abgerundete Umrissecken auf?

Div-Elementen fehlt die Fähigkeit, explizit über die Eigenschaft „border-radius“ abgerundete Umrissecken zu haben. Diese Einschränkung ergibt sich aus dem standardmäßigen quadratischen Umriss, der fokussierbare Elemente in vielen Browsern umgibt.

Alternative Lösung: Umfassen von Box-Shadow

Um den Effekt abgerundeter Umrissecken auf div zu simulieren Elemente sollten Sie die Verwendung von Box-Shadow in Betracht ziehen. Durch die strategische Anwendung eines Kastenschattens mit bestimmten Abmessungen können Sie die Illusion eines abgerundeten Umrisses erzeugen.

Implementierung:

Hier ist ein Beispiel, wie man eine Glätte erzielt Umriss mit Box-Shadow:

<input class="text1">

input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline-color: transparent;
    transition: .1s;
}

.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

Für einen härteren „Outline“-Effekt passen Sie die Box-Shadow-Abmessungen wie folgt an folgt:

.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

Das obige ist der detaillierte Inhalt vonKönnen Div-Elemente abgerundete Umrissecken haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!