0Pricing
CSS Academy · Lekcja

Style, szerokość i kolor obramowania

Zastosują Państwo obramowania o różnych stylach, szerokościach i kolorach, korzystając z właściwości skróconych i rozwiniętych.

Style, szerokość i kolor obramowania to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Skrótowa właściwość border

Skrótowa właściwość border ustawia jednocześnie wszystkie cztery krawędzie: szerokość, styl i kolor.

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

Wartości border-style

Właściwość border-style musi być ustawiona, aby obramowanie było widoczne. Dostępne wartości:

  • solid — linia ciągła
  • dashed — długie kreski
  • dotted — okrągłe kropki
  • double — dwie równoległe linie
  • groove/ridge/inset/outset — efekty trójwymiarowe
  • none — brak obramowania (wartość domyślna)

border-width

border-width akceptuje dowolną jednostkę długości lub słowa kluczowe thin, medium, thick. Dla precyzji używaj wartości liczbowych.

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

border-color

border-color akceptuje dowolną wartość koloru CSS, w tym RGBA zapewniające przezroczystość. currentColor dziedziczy kolor tekstu.

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

Obramowania poszczególnych krawędzi

Ustawiaj obramowanie poszczególnych krawędzi za pomocą właściwości składowych:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

border-radius

border-radius zaokrągla narożniki elementu. Użyj jednej wartości, aby uzyskać jednolite zaokrąglenie, lub maksymalnie czterech wartości, aby kontrolować każdy narożnik osobno.

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

Eliptyczne zaokrąglenie border-radius

Promień każdego narożnika może przyjmować dwie wartości oddzielone znakiem /, co umożliwia asymetryczne zaokrąglenie eliptyczne:

<div class="leaf"></div>

border-image

border-image zastępuje obramowanie pociętym obrazem lub gradientem, umożliwiając tworzenie dekoracyjnych obramowań:

<div class="fancy">Gradient border image</div>

outline a border

outline rysuje linię na zewnątrz obramowania. W przeciwieństwie do obramowania nie wpływa na układ ani wymiary elementu. Jest powszechnie używana jako wskaźnik fokusu klawiatury.

<button class="focus-demo">Focused Button (demo)</button>

Usuwanie outline: zachowaj ostrożność

Nigdy nie usuwaj obramowania :focus bez zapewnienia alternatywnego, widocznego wskaźnika fokusu. Usuwanie stylów fokusu utrudnia korzystanie z aplikacji osobom używającym klawiatury i czytników ekranu.

<button>Button without outline</button>
<a href="#">Link without outline</a>

border-collapse dla tabel

W tabelach HTML border-collapse: collapse łączy sąsiednie obramowania komórek w jedną linię, zapewniając bardziej przejrzysty wygląd.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Szybkie sprawdzenie

Jaka właściwość CSS rysuje linię na zewnątrz obramowania, nie wpływając na układ elementu?

Podsumowanie

Skrótowa właściwość border ustawia szerokość, styl i kolor. border-radius zaokrągla narożniki. outline jest niezależne od obramowania — nie wpływa na układ i ma kluczowe znaczenie dla wskaźników fokusu dostępnych z klawiatury.

Często zadawane pytania

Czy lekcja „Style, szerokość i kolor obramowania” jest bezpłatna?

Tak — pełny tekst „Style, szerokość i kolor obramowania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Style, szerokość i kolor obramowania”?

Zastosują Państwo obramowania o różnych stylach, szerokościach i kolorach, korzystając z właściwości skróconych i rozwiniętych. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Style, szerokość i kolor obramowania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Poznawanie width, height, margin i padding
  2. Style, szerokość i kolor obramowania
  3. box-sizing: content-box i border-box
  4. Outline i box-shadow
← Powrót do CSS Academy