Ramki i kontury CSS są cennymi narzędziami dla projektantów stron internetowych, którzy chcą dodać charakteru witrynie. Są łatwe w użyciu, gdy wiesz, jak działają, i są wystarczająco wszechstronne, aby zaspokoić szeroki zakres potrzeb. Przyjrzyjmy się granicom CSS, aby zobaczyć, od czego zacząć.

Jaka jest różnica między obramowaniem a konturem w CSS?

Kontury i obramowania CSS tworzą dwie zewnętrzne warstwy model pudełkowy CSS, siedząc między granicami i marginesami. Chociaż te właściwości są podobne, mają różne wartości i cele.

Po pierwsze, kontury CSS znajdują się poza granicami. Oznacza to, że mogą nakładać się na zawartość poza elementem, do którego je stosujesz. Wraz z tym obramowania CSS zmieniają wymiary elementu, ale kontury nie.

Jeśli masz trudności z wizualizacją stylów obramowania i konturu, możesz użyć swojego narzędzia programistyczne przeglądarki do debugowania ich.

Wartości wspólnych właściwości obramowania i konturu CSS

Pomimo różnic, obramowania i kontury CSS mają pewne wspólne wartości. Skrót, którego używasz dla każdego z nich, jest również bardzo podobny.

instagram viewer

Skrót CSS Border & Outline

Podobnie jak inne złożone właściwości CSS, zarówno obramowania, jak i kontury mają dostępne skróty. Obie te właściwości mają ten sam format opcji skróconych i wygląda to tak.

granica: szerokośćstylkolor;
zarys: szerokośćstylkolor;

Tworzy to reguły, które wyglądają tak, gdy są w akcji. Oczywiście ten skrót nie obejmuje wszystkich wartości dostępnych dla tych właściwości.

obramowanie: 10 pikseli jednolity niebieski;
kontur: 20 pikseli jednolity czerwony;

Te skrócone reguły CSS dotyczące obramowania i konturu dają cienką niebieską ramkę z grubym czerwonym konturem.

Podobnie jak w przypadku innych skróconych właściwości CSS, możesz również użyć pojedynczych właściwości, aby osiągnąć te same wyniki.

Szerokość obramowania CSS i szerokość konturu

Szerokości obramowania i konturu to opcjonalne wartości właściwości CSS, które określają grubość używanych obramowań i konturów. Format dla tych właściwości jest taki sam.

szerokość konturu: 20px;
szerokość obramowania: 10px;

Ramki umożliwiają ustawienie indywidualnych szerokości dla każdej strony elementu, ale kontury nie. Możesz przeczytać więcej na ten temat w poniższych sekcjach.

Styl obramowania CSS i styl konturu

Ramki i kontury CSS są dostępne w różnych stylach. Jednolite obramowania są najczęstsze, ale możesz wykazać się kreatywnością, używając obramowań i konturów.

styl obramowania: solidny;
styl konspektu: kropkowany;

Pełną listę różnych stylów obramowań i konturów CSS znajdziesz na końcu tego artykułu.

Kolor obramowania CSS i kolor konturu

Podobnie jak w przypadku innych właściwości CSS opartych na kolorach, obramowania i kontury akceptują wszystkie dozwolone kolory CSS. Obejmuje to kody szesnastkowe, kody RGB, skrócone kolory i wiele innych.

kolor obramowania: niebieski;
kolor konturu: #ff0000;

Możesz także używać gradientów kolorów podczas pracy z obramowaniami i konturami CSS.

Wartości właściwości obramowania CSS

Wraz z ich wspólnymi wartościami właściwości, granice i kontury mają również unikalne wartości do zbadania. Ramki CSS mają dwie unikalne właściwości, których warto się nauczyć.

Promień obramowania CSS

Dodanie promienia do krawędzi elementu daje dużą kontrolę nad jego kształtem. Każdy róg elementu może mieć inny promień, a tę właściwość można ustawić nawet wtedy, gdy styl obramowania jest ustawiony na brak.

promień obramowania: 20px;

Możesz ustawić jedną wartość, aby zmienić promień wszystkich narożników.

Możesz także podzielić rogi na grupy górny lewy/dolny prawy i górny prawy/dolny lewy.

promień obramowania: 10px 20px;

Ułatwia to tworzenie ciekawych kształtów za pomocą elementów HTML.

Na koniec możesz ustawić każdy róg tak, aby miał własny promień.

promień obramowania: 10px 20px 30px 40px;

Te wartości obowiązują zgodnie z ruchem wskazówek zegara, zaczynając od lewego górnego rogu.

Właściwości strony obramowania CSS

W przeciwieństwie do konturów, możesz ustawić każdą stronę obramowania tak, aby miała unikalną wartość dla wielu jej właściwości. Umożliwia to nadanie każdej stronie elementu innej szerokości.

szerokość lewego marginesu: 10px;
szerokość po prawej stronie granicy: 20px;
górna szerokość obramowania: 30px;
szerokość na dole: 40px;

Możesz także ustawić niezależne style obramowania CSS dla każdej strony elementu.

styl obramowania po lewej stronie: solidny;
styl border-right: kropkowany;
styl obramowania: przerywany;
styl obramowania na dole: podwójnie;

I możesz zmienić kolor każdej strony, jeśli chcesz.

border-left-style: niebieski;
styl obramowania w prawo: #ff0000;
styl na granicy: #00ff00;
styl obramowania na dole: rgb (0, 0, 255);

Strony obramowania CSS działają ze zwykłym skrótem, aby łączyć się w ten sposób.

lewe obramowanie: 10 pikseli jednolicie niebieski;
prawa granica: 20piksele kropkowane #00ff00;
granica górna: 30piksel przerywany #ff0000;
granica-dół: 40piks podwójniergb(0, 0, 255);

Wartości właściwości konspektu CSS

Podobnie jak obramowania CSS, kontury mają swoją własną unikalną właściwość; przesunięcie konturu.

Przesunięcie konturu CSS

Dodanie przesunięcia do konturu tworzy przestrzeń między nim a głównym elementem. To przesunięcie musi być takie samo dla każdej strony konturu, a właściwość akceptuje tylko jedną wartość.

przesunięcie konturu: 10px;

Może to być fajny sposób na wykorzystanie trzeciego obramowania elementów, które pasuje do koloru tła.

Style obramowania i konturu CSS

Zarówno obramowania, jak i kontury wymagają odpowiedniego stylu. Do wyboru jest dziesięć dostępnych stylów, w tym obramowania, które w ogóle się nie pojawiają.

styl obramowania: solidny;
styl obramowania: kropkowany;
styl obramowania: przerywany;
styl obramowania: rowek;
styl obramowania: kalenica;
styl obramowania: podwójnie;
styl obramowania: wstawka;
styl obramowania: początek;
styl obramowania: ukryty;
styl obramowania: brak;

Obramowania współdzielą te same style z konturami, tylko z ustawionym stylem konturu jako właściwością.

Jak korzystać z obramowań i konturów CSS

Kontury i obramowania to świetne narzędzia do projektowania dla twórców stron internetowych. Możesz określić wygląd i styl swojej witryny za pomocą tych właściwości CSS, ale musisz wykazać się kreatywnością.