Corso di CSS / Bordi, angoli arrotondati e ombre CSS

I bordi CSS definiscono il bordo visibile di una scatola, border-radius arrotonda i suoi angoli e box-shadow aggiunge un'ombra senza aumentare la dimensione del layout. Le ombre possono ancora essere ritagliate dalle impostazioni di overflow di un antenato, e un bordo arrotondato non ritaglia automaticamente ogni elemento figlio.

Imposta larghezza, stile e colore del bordo

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

Lo shorthand border combina larghezza, stile e colore. solid traccia una linea continua, dashed traccia linee tratteggiate e dotted traccia punti. Uno stile none sopprime il bordo previsto anche se sono presenti larghezza e colore. Usa border-bottom o border-block-end quando solo un lato necessita di un bordo. Per ulteriori dettagli, vedi Modello a scatola CSS: contenuto, padding, bordo e margine.

Con una larghezza fissa border-box, aumentando lo spessore del bordo si riduce lo spazio interno mantenendo la larghezza esterna. Un bordo o un'ombra decorativa ha un ruolo diverso dal contorno di focus che identifica l'obiettivo della tastiera corrente. Mantieni visibile quell'indicatore. Vedi MDN: border.

Confronta lunghezze e percentuali degli angoli

.round { border-radius: 12px; }

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

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

Un valore di lunghezza come 12px specifica il raggio dell'angolo. È possibile dare valori diversi ai quattro angoli, ma confrontali prima con un unico valore. Se applichi il 50% a un box con la stessa larghezza e altezza, sembrerà un cerchio, e se le dimensioni orizzontali e verticali sono diverse, sembrerà un'ellisse. Il raggio orizzontale della percentuale si basa sulla larghezza, e il raggio verticale si basa sull'altezza.

Gli angoli arrotondati del contenitore genitore non ritagliano automaticamente l'immagine figlia. Scegli tra applicare il border-radius direttamente all'immagine o ritagliare l'overflow dal genitore, a seconda del tuo scopo. Se aggiungi 'hidden' al genitore, l'ombra o la visualizzazione del focus del figlio potrebbe essere tagliata al bordo. Il confronto seguente distingue quale box viene ritagliato. Puoi verificare il calcolo del raggio nella descrizione del border-radius di MDN.

Leggere i valori dell'ombra

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

Le prime due lunghezze sono obbligatorie e blur e spread possono essere omessi. Il raggio di blur non può essere negativo. Aggiungendo inset si ottiene l'ombra interna, il default è l'ombra esterna. Esiste anche un modo per aggiungere più ombre, ma prima controlla modificando separatamente il movimento e la dimensione di un'ombra.

Un'ombra non riserva spazio nel layout. Non spingerà via una scheda successiva in base alla quantità del suo blur o spread. Ombre grandi possono oscurare contenuti vicini, quindi fornisci spazi effettivi con margini o gap di layout quando necessario. Vedi MDN: box shadow.

Trova l'antenato che ritaglia un'ombra

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

.frame.clip { overflow: hidden; }

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

Le ultime due schede hanno genitori separati .frame. Le ombre delle schede figlie sono identiche, ma un genitore permette l'overflow visibile mentre l'altro lo ritaglia. L'ombra si estende oltre i 12px di padding del genitore, quindi la versione con overflow nascosto la taglia al confine del genitore. Ispeziona quell'antenato quando diagnostichi un'ombra ritagliata. Vedi Overflow CSS, testo lungo a capo e puntini di sospensione.

Applicare overflow: hidden alla scheda stessa e far ritagliare la sua ombra esterna da un genitore sono due situazioni diverse. Questo esercizio è una situazione in cui un genitore taglia l'ombra esterna di una scheda figlio. Se l'ombra non è visibile nella pagina effettiva, dovresti controllare non solo il valore della scheda stessa, ma anche l'overflow e il bordo dell'elemento genitore.

Esegui l'esempio e confronta le modifiche

Salva il codice qui sotto come UTF-8 in borders.html. Sono inclusi confronti di bordi, angoli arrotondati, ombre esterne, ombre interne, cerchi ed ellissi, e troncamenti.

<!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. Cambia lo spessore del .border da 2px a 8px. Nelle finestre larghe, assicurati che la larghezza esterna sia mantenuta e lo spazio interno sia ridotto, poi riportalo a 2px.
2. Cambia la larghezza del .shape da 80px a 160px. Assicurati che il cerchio diventi un'ellisse se mantieni l'altezza a 80px. Ripristina alla larghezza originale.
3. Modifica lo spostamento orizzontale del .shadow a 20px e lo spostamento verticale a -8px. Mantieni il blur a 24px e confronta solo la direzione del movimento. Successivamente, cambia il blur a 0, confrontalo con il bordo netto e poi riportalo al valore originale.
4. Cambia lo spread da 4px a -4px. Nota se la dimensione dell'ombra diminuisce. Nel secondo .frame cambia hidden in visible, verifica che l’ombra oltre il genitore torni visibile e ripristina hidden.

Se l'ombra è sfocata, controlla l'opacità del colore e il contrasto dello sfondo, e se solo un lato è tagliato, controlla il bordo e l'overflow del genitore. Se il contenuto figlio all'interno dell'angolo sporge, confrontiamo anche il metodo di dare angoli arrotondati al figlio stesso. Scegli effetti che mantengano il contenuto leggibile e i controlli riconoscibili.