CSS-Kurs / Rahmen, abgerundete Ecken und Schatten

CSS-Rahmen definieren die sichtbare Kante eines Elements, border-radius rundet seine Ecken ab, und box-shadow fügt einen Schatten hinzu, ohne die Layoutgröße zu vergrößern. Schatten können dennoch durch die overflow-Einstellungen eines übergeordneten Elements abgeschnitten werden, und ein abgerundeter Rahmen schneidet nicht automatisch jedes Kind.

Breite, Stil und Farbe des Rahmens festlegen

.card { border: 2px solid #3d6b89; }

Die border Abkürzung kombiniert Breite, Stil und Farbe. solid zeichnet eine durchgehende Linie, dashed zeichnet Striche und dotted zeichnet Punkte. Ein none Stil unterdrückt die erwartete Umrandung, selbst wenn eine Breite und Farbe vorhanden sind. Verwenden Sie border-bottom oder border-block-end, wenn nur eine Kante eine Umrandung benötigt. Für weitere Details siehe Das Boxmodell: Inhalt, Padding, Rahmen und Außenabstand.

Mit einer festen border-box-Breite reduziert eine Erhöhung der Rahmenstärke den inneren Raum, während die äußere Breite beibehalten wird. Ein dekorativer Rahmen oder Schatten hat eine andere Funktion als die Fokus-Kontur, die das aktuelle Tastaturziel identifiziert. Halten Sie diesen Indikator sichtbar. Siehe MDN: border.

Vergleichen Sie Ecklängen und Prozentsätze

.round { border-radius: 12px; }

.circle { width: 80px; height: 80px; border-radius: 50%; }

.oval { width: 160px; height: 80px; border-radius: 50%; }

Ein Längenwert wie 12px gibt den Eckradius an. Sie können den vier Ecken unterschiedliche Werte geben, sollten sie aber zuerst mit einem Wert vergleichen. Wenn Sie 50% auf eine Box mit gleicher Breite und Höhe anwenden, sieht sie wie ein Kreis aus, und wenn die horizontalen und vertikalen Größen unterschiedlich sind, sieht sie wie eine Ellipse aus. Der horizontale Radius des Prozentsatzes basiert auf der Breite, und der vertikale Radius basiert auf der Höhe.

Die abgerundeten Ecken des Elternteils schneiden das Kindbild nicht automatisch zu. Entscheiden Sie je nach Zweck, ob Sie border-radius dem Bild selbst geben oder den Überlauf des Elternteils abschneiden möchten. Wenn Sie am Elternelement overflow: hidden setzen, kann auch die Anzeige des Schattens/Fokus des Kindes an der Grenze abgeschnitten werden. Der folgende Vergleich zeigt, welche Box abgeschnitten wird. Sie können die Radiusberechnung in MDNs border-radius-Beschreibung überprüfen.

Die Schattenwerte lesen

.shadow { box-shadow: 0 8px 24px 4px rgb(0 0 0 / 16%); }

Die ersten beiden Längen sind erforderlich, und Weichzeichnen und Ausbreitung können weggelassen werden. Der Weichzeichnungsradius darf nicht negativ sein. Das Hinzufügen von inset ist der innere Schatten, standardmäßig ist es der äußere Schatten. Es gibt auch eine Möglichkeit, mehrere Schatten hinzuzufügen, aber überprüfen Sie zuerst, indem Sie die Bewegung und Größe eines Schattens separat ändern.

Ein Schatten reserviert keinen Layoutplatz. Er wird eine nachfolgende Karte nicht um die Höhe seines Weichzeichnens oder seiner Ausbreitung verschieben. Große Schatten können nahegelegene Inhalte verdecken, daher sollten bei Bedarf tatsächliche Abstände mit Margen oder Layout-Lücken bereitgestellt werden. Siehe MDN: box shadow.

Finden Sie den Vorfahren, der einen Schatten beschneidet

.frame { padding: 12px; overflow: visible; }

.frame.clip { overflow: hidden; }

.frame .card { box-shadow: 0 18px 20px 8px rgb(0 0 0 / 25%); }

Die letzten zwei Karten haben separate .frame-Elternelemente. Ihre Kind-Schatten sind identisch, aber ein Elternteil erlaubt sichtbaren Überlauf und das andere schneidet ihn ab. Der Schatten erstreckt sich über das 12px-Elternpadding hinaus, daher wird die Version mit verstecktem Überlauf an der Elterngrenze abgeschnitten. Überprüfen Sie diesen Vorfahren, wenn Sie einen abgeschnittenen Schatten diagnostizieren. Siehe Überlauf, lange Zeichenfolgen und Auslassungszeichen.

Unterscheiden Sie overflow: hidden an der Karte selbst vom Abschneiden ihres äußeren Schattens durch ein übergeordnetes Element. Diese Übung ist eine Situation, in der ein Elternteil den äußeren Schatten einer Kindkarte abschneidet. Wenn der Schatten auf der tatsächlichen Seite nicht sichtbar ist, sollten Sie nicht nur den Wert der Karte selbst überprüfen, sondern auch den Überlauf und die Grenze des Elternelements.

Führen Sie das Beispiel aus und vergleichen Sie die Änderungen

Speichern Sie den unten stehenden Code als UTF-8 in borders.html. Vergleiche von Rändern, abgerundeten Ecken, äußeren Schatten, inneren Schatten, Kreisen und Ellipsen sowie Kürzungen sind alle enthalten.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing borders, corners, and shadows</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 24px; color: #333; font: 16px/1.6 sans-serif; background: #f6f8fa; }
    .card { width: 100%; max-width: 320px; margin-block: 24px; padding: 20px; background: white; }
    .border { border: 2px solid #3d6b89; }
    .round { border: 2px solid #3d6b89; border-radius: 12px; }
    .shadow { border-radius: 12px; box-shadow: 0 8px 24px 4px rgb(0 0 0 / 16%); }
    .inset { box-shadow: inset 0 0 12px 2px rgb(0 0 0 / 20%); }
    .shape { width: 80px; height: 80px; margin-block: 16px; border-radius: 50%; background: #6eb898; }
    .oval { width: 160px; }
    .frame { width: 100%; max-width: 320px; padding: 12px; margin-block: 24px; background: #dce8f1; overflow: visible; }
    .frame .card { margin: 0; max-width: none; height: 100px; box-shadow: 0 18px 20px 8px rgb(0 0 0 / 25%); }
    .clip { overflow: hidden; }
  </style>
</head>
<body>
  <h1>Card boundaries and shadows</h1>
  <div class="card border">Card with a border only</div>
  <div class="card round">Border and rounded corners</div>
  <div class="card shadow">Outer shadow</div>
  <div class="card inset">Inset shadow</div>
  <h2>50% Edges: Circles and Ovals</h2><div class="shape" role="img" aria-label="80×80 circle"></div><div class="shape oval" role="img" aria-label="160×80 ellipse"></div>
  <h2>Parent: overflow: visible</h2><div class="frame"><div class="card">Child shadow visible outside the parent</div></div>
  <h2>Parent: overflow: hidden</h2><div class="frame clip"><div class="card">Child shadow clipped at the parent boundary</div></div>
</body>
</html>

1. Ändern Sie die Dicke der .border von 2px auf 8px. Stellen Sie in breiten Fenstern sicher, dass die äußere Breite beibehalten wird und der Innenraum reduziert wird, und setzen Sie sie dann wieder auf 2px zurück.
2. Ändern Sie die Breite der .shape von 80px auf 160px. Stellen Sie sicher, dass der Kreis zu einer Ellipse wird, wenn Sie die Höhe bei 80px belassen. Stellen Sie die ursprüngliche Breite wieder her.
3. Ändern Sie die horizontale Verschiebung des .shadow auf 20px und die vertikale Verschiebung auf -8px. Behalten Sie den Blur bei 24px und vergleichen Sie nur die Bewegungsrichtung. Ändern Sie als Nächstes den Blur auf 0, vergleichen Sie ihn mit der scharfen Kante und stellen Sie ihn dann wieder auf den ursprünglichen Wert zurück.
4. Ändern Sie den Spread von 4px auf -4px. Beachten Sie, ob die Schattengröße abnimmt. Stellen Sie spread danach auf 4px zurück. Ändern Sie in der zweiten .frame-Variante overflow von hidden zu visible, prüfen Sie den wieder sichtbaren äußeren Schatten und stellen Sie hidden wieder her.

Wenn der Schatten unscharf ist, überprüfen Sie die Deckkraft der Farbe und den Hintergrundkontrast, und wenn nur eine Seite abgeschnitten ist, überprüfen Sie den Rahmen und den Überlauf des Elternteils. Ragt der Kindinhalt über die Rundung hinaus, vergleichen Sie border-radius am Kindelement mit dem Abschneiden am Elternelement. Wählen Sie die Gestaltung so, dass Inhalt und Fokusmarkierungen gut erkennbar bleiben.