Stylizacja obramowania

Lekcja 5 z 6 w kursie Projekt CSS — prosty wskaźnik ładowania w Coddy.

Dodajmy zaokrąglony styl obramowania wskaźnika ładowania.

Aby ustawić kolor obramowania tylko dla wybranych krawędzi, użyj kolejności (góra, prawa, dół, lewa).

border-color: black transparent black transparent

Powyższy zapis ustawi czarny kolor obramowania tylko dla górnej i dolnej krawędzi. Możesz też użyć właściwości border-top-color i border-bottom-color!

Nie zapomnij ustawić border-width i border-style.

Wyzwanie

Łatwy

Usuń kolor tła ze spinnera i dodaj następujące właściwości CSS:

border-width o wartości 6px
border-style o wartości solid
border-color tylko dla górnej i dolnej krawędzi — wybierz dowolny kolor! (lewa i prawa krawędź powinny być transparent)

Zaokrąglij również całą krawędź spinnera. Jeśli nie wiesz, jak to zrobić, sprawdź podpowiedź.

Spróbuj swoich sił

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

Wszystkie lekcje w sekcji Projekt CSS — prosty wskaźnik ładowania

1Wprowadzenie

Wprowadzenie Część HTML

2Projekt CSS

Rozmiar i kolor

Obróć to!

Stylizacja obramowania Lekcja projektowa

Końcowe stylizacje

Poćwicz samodzielnie: Edytor online Web