Stile del bordo

Lezione 5 di 6 del corso Progetto CSS - Semplice indicatore di caricamento di Coddy.

Aggiungiamo uno stile arrotondato al bordo dello spinner.

Per aggiungere il colore del bordo solo ad angoli specifici, usa (alto destra basso sinistra)

border-color: black transparent black transparent

Quanto sopra aggiungerà il colore del bordo (nero) solo ai bordi superiore e inferiore; puoi anche usare le proprietà border-top-color e border-bottom-color!

Non dimenticare di aggiungere border-width e border-style.

Sfida

Facile

Rimuovi il colore di sfondo dallo spinner e aggiungi le seguenti proprietà CSS:

border-width di 6px
border-style di solid
border-color solo per la parte superiore e inferiore, scegli il colore che vuoi! (i bordi a sinistra e a destra devono essere transparent)

Arrotonda anche tutto il bordo dello spinner; se non sai come fare, consulta il suggerimento.

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="spinner" />
</body>
</html>

Tutte le lezioni di Progetto CSS - Semplice indicatore di caricamento

1Introduzione

Introduzione Parte di HTML

2Il progetto CSS

Dimensioni e colore

Fallo ruotare!

Stile del bordo Lezione di progetto

Stile finale

Esercitati da solo: Playground Web