Wie kann ich abgerundete Umrisse für Divs erstellen?

Können Sie ein Div mit abgerundeten Ecken umreißen?

Ähnlich wie bei der Eigenschaft border-radius ist es möglich, Div-Elementen abgerundete Umrisse zu geben. Während Sie vielleicht denken, dass die Eigenschaft border-radius den Zweck erfüllen könnte, gibt es eine Alternative, die mehr Kontrolle bietet: box-shadow.

Zum Beispiel, wenn Sie ein Eingabefeld mit abgerundeten Rändern haben und den Fokus anpassen möchten Umrissfarbe, Box-Shadow kann verwendet werden. Es sorgt für ein glattes Aussehen und ermöglicht gleichzeitig die Simulation einer abgerundeten Kontur. So können Sie diesen Effekt erzielen:

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;
}

Das obige ist der detaillierte Inhalt vonWie kann ich abgerundete Umrisse für Divs erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!