Wie kann ich mit Box-Shadow abgerundete Umrisse für Div-Elemente erstellen?

Abgerundete Umrisse für Div-Elemente mit Box-Shadow erstellen

Das Anpassen der Umrissdarstellung eines Div-Elements kann das Benutzererlebnis und die visuelle Ästhetik verbessern. Durch die Verwendung der Box-Shadow-Eigenschaft können wir abgerundete Ecken erreichen, ähnlich der Funktionalität von border-radius für den Umriss des Elements.

Um diese Technik zu veranschaulichen, stellen Sie sich ein Szenario vor, in dem Sie ein Eingabefeld mit abgerundeten Rändern und Wünschen haben um die Farbe des Umrisses zu ändern, wenn er den Fokus erhält. Der herkömmliche quadratische Umriss kann unattraktiv sein.

Lösung:

Anstatt zu versuchen, den Umriss mit herkömmlichen Methoden abzurunden, nutzen Sie die Box-Shadow-Eigenschaft. Diese Lösung bietet ein glatteres, anpassbareres Erscheinungsbild. Durch die Feinabstimmung der Einstellungen des Box-Schattens können wir einen Pseudo-Umriss erstellen, der einem abgerundeten Umriss sehr nahe kommt:

  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 hat das Eingabeelement zunächst einen Rahmenradius von 2pt, aber das Feld Die Eigenschaft -shadow fügt einen 1pt großen grauen Schatten um das Element hinzu. Wenn das Element den Fokus erhält, vergrößert sich der Kastenschatten auf 3pt mit kornblumenblauer Farbe für eine glattere Kontur. Darüber hinaus können Sie einen klareren Umriss erstellen, indem Sie den Box-Schatten auf 0 0 0 2pt Rot einstellen.

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