Stylowanie obramowań (border) w CSS umożliwia deweloperom tworzenie wizualnych oddzielenia elementów, dodawanie dekoracji oraz podkreślanie ważnych sekcji na stronie internetowej. CSS oferuje szeroki zakres właściwości do manipulacji obramowaniami, w tym zmianę koloru, grubości, stylu, a także zaokrąglenie rogów. W tej lekcji przyjrzymy się różnym sposobom wykorzystania tych właściwości, aby stworzyć efektowne i funkcjonalne obramowania.
Przykład użycia obramowań w CSS
Poniżej znajduje się kompletny przykład kodu HTML i CSS, ilustrujący różne sposoby stylizacji obramowań.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylowanie obramowań w CSS</title>
<style>
/* Styl podstawowy dla wszystkich przykładów */
.example {
margin: 20px;
padding: 20px;
text-align: center;
}
/* Obramowanie o stałej grubości i kolorze */
.solid-border {
border: 3px solid #000; /* Grubość: 3px, Styl: solid, Kolor: czarny */
}
/* Różne obramowania dla każdego boku */
.different-sides {
border-top: 4px dotted red; /* Górne obramowanie: kropkowane, czerwone */
border-right: 2px dashed green; /* Prawe obramowanie: przerywane, zielone */
border-bottom: 5px solid blue; /* Dolne obramowanie: ciągłe, niebieskie */
border-left: 3px double orange; /* Lewe obramowanie: podwójne, pomarańczowe */
}
/* Skrócona notacja obramowań */
.shorthand-border {
border: 2px dashed purple; /* Grubość: 2px, Styl: przerywane, Kolor: fioletowy */
}
/* Zaokrąglone rogi */
.rounded-border {
border: 2px solid teal; /* Obramowanie ciągłe, kolor teal */
border-radius: 15px; /* Zaokrąglenie rogów */
}
</style>
</head>
<body>
<div class="example solid-border">Stałe obramowanie</div>
<div class="example different-sides">Różne boki</div>
<div class="example shorthand-border">Skrócona notacja</div>
<div class="example rounded-border">Zaokrąglone rogi</div>
</body>
</html>
Opis przykładów
- Stałe obramowanie (
solid-border
): Demonstruje użycie jednolitego, stałego obramowania wokół elementu. - Różne boki (
different-sides
): Pokazuje, jak zdefiniować różne style obramowań dla każdego boku elementu niezależnie. - Skrócona notacja (
shorthand-border
): Ilustruje użycie skróconej notacji do definiowania stylu, grubości i koloru obramowania. - Zaokrąglone rogi (
rounded-border
): Prezentuje sposób zaokrąglania rogów obramowania za pomocą właściwościborder-radius
.
Podsumowanie
Obramowania w CSS są potężnym narzędziem do podkreślania, oddzielania i dodawania estetycznego wyglądu do elementów na stronie internetowej. Dzięki różnorodności dostępnych opcji, takich jak zmiana koloru, stylu, grubości, możliwość definiowania różnych obramowań dla poszczególnych boków,