Obramowanie i zaokrąglenia

Lekcja 5 z 8 w kursie Projekt CSS — efektowny przycisk w Coddy.

Element button w HTML ma domyślną obramowanie — dostosujmy je!

Aby zaokrąglić obramowanie, użyj właściwości border-radius (użyj tych samych wartości co w przypadku padding lub margin), na przykład:

#rounded {
	border-radius: 8px;
}

Aby całkowicie usunąć obramowanie, możesz je nadpisać w ten sposób:

#no-border {
	border: none;
}

Wskazówka: jeśli ustawisz dużą wartość border-radius, element będzie miał kształt koła!

Wyzwanie

Łatwy

Zadania:

Zmień promień zaokrąglenia obramowania na wartość większą niż 0
Zmień obramowanie na inne niż domyślne

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Wpisz tutaj kod HTML -->
    </body>
</html>

Wszystkie lekcje w sekcji Projekt CSS — efektowny przycisk

1Wprowadzenie

Wprowadzenie Część dotycząca HTML

2Projekt CSS

Rozmiary

Kolory

Obramowanie i zaokrąglenia Lekcja projektowa

Cienie

Efekt po najechaniu

Końcowe stylowanie

Poćwicz samodzielnie: Edytor online Web