8.1 Właściwość border
Ramki to ważny element web-designu. Pozwalają one wyróżniać elementy i poprawiać wizualny odbiór strony. CSS oferuje wiele właściwości do tworzenia i stylizacji ramek. Przyjrzyjmy się podstawowym właściwościom ramek, w tym ich kompaktowej i pełnej notacji, a także właściwościom dla ustawienia szerokości, stylu, koloru i zaokrąglonych krawędzi ramek.
Podstawowe parametry
Podstawowe parametry ramki można ustawiać z użyciem osobnych właściwości: border-width, border-style i border-color.
Składnia:
element {
border-width: width;
border-style: style;
border-color: color;
}
Przykład użycia:
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
Kompaktowa notacja
Właściwość border pozwala ustawić wszystkie podstawowe parametry ramki (szerokość, styl i kolor) w jednej linii.
Składnia:
element {
border: width style color;
}
.border-compact {
border: 2px solid red;
}
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
<body>
<div class="border-compact">Kompaktowa notacja</div>
<div class="border-full">Pełna notacja</div>
</body>
8.2 Szerokość ramki: border-width
Właściwość border-width ustawia szerokość ramki. Wartości mogą być podane w pikselach (px), punktach (pt), procentach (%) lub słowach kluczowych (thin, medium, thick).
Składnia:
element {
border-width: width;
}
Przykład:
.border-thin {
border: thin solid black;
}
.border-medium {
border: medium solid black;
}
.border-thick {
border: thick solid black;
}
.border-custom {
border-width: 5px;
border-style: solid;
border-color: black;
}
<body>
<div class="border-thin">Cienka ramka</div>
<div class="border-medium">Średnia ramka</div>
<div class="border-thick">Gruba ramka</div>
<div class="border-custom">Ramka o szerokości 5px</div>
</body>
8.3 Styl ramki: border-style
Opis:
Właściwość border-style ustawia styl ramki. Style obejmują:
none: bez ramkisolid: linia ciągładotted: linia kropkowanadashed: linia przerywanadouble: linia podwójnagroove: ramka w formie rowkaridge: ramka w formie grzbietuinset: wklęsła ramkaoutset: wypukła ramka
Składnia:
element {
border-style: style;
}
Przykład:
.border-none {
border: 2px none black;
}
.border-solid {
border: 2px solid black;
}
.border-dotted {
border: 2px dotted black;
}
.border-dashed {
border: 2px dashed black;
}
.border-double {
border: 4px double black;
}
.border-groove {
border: 4px groove black;
}
.border-ridge {
border: 4px ridge black;
}
.border-inset {
border: 4px inset black;
}
.border-outset {
border: 4px outset black;
}
<body>
<div class="border-none">Bez ramki</div>
<div class="border-solid">Linia ciągła</div>
<div class="border-dotted">Linia kropkowana</div>
<div class="border-dashed">Linia przerywana</div>
<div class="border-double">Linia podwójna</div>
<div class="border-groove">Rowek</div>
<div class="border-ridge">Grzbiet</div>
<div class="border-inset">Wklęsła ramka</div>
<div class="border-outset">Wypukła ramka</div>
</body>
8.4 Kolor ramki: border-color
Właściwość border-color ustawia kolor ramki. Kolor może być określony w różnych formatach: nazwy kolorów,
kody szesnastkowe, RGB, RGBA, HSL, HSLA.
Składnia:
element {
border-color: color;
}
.border-red {
border: 2px solid red;
}
.border-blue {
border: 2px solid blue;
}
.border-green {
border: 2px solid green;
}
.border-rgba {
border: 2px solid rgba(255, 0, 0, 0.5);
}
<body>
<div class="border-red">Czerwona ramka</div>
<div class="border-blue">Niebieska ramka</div>
<div class="border-green">Zielona ramka</div>
<div class="border-rgba">Półprzezroczysta czerwona ramka</div>
</body>
8.5 Zaokrąglone rogi z border-radius
Właściwość border-radius pozwala zaokrąglać rogi elementów, tworząc zaokrąglone ramki. Może być
stosowana do wszystkich czterech rogów jednocześnie lub do każdego rogu osobno.
Składnia:
element {
border-radius: radius;
}
Wartości:
- Jedna wartość: na przykład,
border-radius: 10px;— ustawia taki sam promień zaokrąglenia dla wszystkich rogów - Dwie wartości: na przykład,
border-radius: 10px 20px;— pierwsza wartość dla górnych lewych i dolnych prawych rogów, druga — dla górnych prawych i dolnych lewych rogów - Cztery wartości: na przykład,
border-radius: 10px 20px 30px 40px;— ustawia promienie dla górnego lewego, górnego prawego, dolnego prawego i dolnego lewego rogu odpowiednio - Mieszane wartości: promienie można ustawiać w procentach, co pozwala adaptować zaokrąglenie do rozmiarów elementu
Przykład:
.radius-all {
border: 2px solid black;
border-radius: 15px;
padding: 10px;
margin: 10px;
}
.radius-top {
border: 2px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 10px;
margin: 10px;
}
.radius-bottom {
border: 2px solid blue;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
padding: 10px;
margin: 10px;
}
.radius-mixed {
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
padding: 10px;
margin: 10px;
}
<body>
<div class="radius-all">Zaokrąglenie wszystkich rogów</div>
<div class="radius-top">Zaokrąglenie górnych rogów</div>
<div class="radius-bottom">Zaokrąglenie dolnych rogów</div>
<div class="radius-mixed">Mieszane zaokrąglenie rogów</div>
</body>
.radius-all: stosuje jednakowy promień zaokrąglenia (15px) do wszystkich rogów.radius-top: stosuje zaokrąglenie (20px) tylko do górnych rogów.radius-bottom: stosuje zaokrąglenie (25px) tylko do dolnych rogów.radius-mixed: stosuje różne wartości promienia do każdego rogu
GO TO FULL VERSION