Rodzaje obramowań CSS. Ustawianie wartości dla boków osobno

dymek ( /* inne style */ display: table; ) .peech-bubble p ( display: komórka tabeli; wyrównanie do pionu: środek; )

Nie ograniczamy się do trójkątów. CSS może renderować różne kształty- nawet serca i znak zagrożenia biologicznego.

Biohazard (szerokość: 0; wysokość: 0; obramowanie: 60 pikseli pełne; promień obramowania: 50%; kolor górnego obramowania: czarny; kolor dolnego obramowania: czarny; kolor lewego obramowania: żółty; obramowanie prawe- kolor żółty; )

Wniosek

Kilka lekcji wcześniej przyjrzeliśmy się schematycznej reprezentacji bloku strony internetowej, a także krótko omówiliśmy właściwość CSS border, której można użyć do ustawienia granic elementu. Tym razem przyjrzymy się tej nieruchomości bardziej szczegółowo na przykładach.

Granica znajduje się pomiędzy marginesem a dopełnieniem. Oznacza to, że margines jest za granica. Obramowanie można ustawić ze wszystkich czterech stron (jakby zamykając bryłę w ramce) lub z jednej, dwóch lub trzech stron. CSS pozwala kontrolować grubość, kolor i styl obramowań. Przeanalizujmy to bardziej szczegółowo.

Szerokość obramowania: szerokość obramowania

Właściwość border-width ustawia szerokość obramowania. Najczęściej rozmiar ten jest podawany w pikselach. Możesz ustawić tę samą lub różną szerokość dla wszystkich czterech krawędzi, na przykład:

/* wszystkie 4 obramowania mają szerokość 2px: */ border-width: 2px; /* górna i dolna granica ma szerokość 2px, lewa i prawa 4px: */ border-width: 2px 4px; /* górna krawędź - 2px, lewa i prawa - 6px, dolna - 3px: */ border-width: 2px 6px 3px; /* górna krawędź - 2px, prawa - 3px, dolna - 4px, lewa - 5px: */ border-width: 2px 3px 4px 5px;

Ponadto istnieją słowa kluczowe wskazujące szerokość obramowania:

• cienki - obramowanie o szerokości 2px;
• średni - obramowanie o szerokości 4px;
• gruby - szerokość obramowania 6px.

Kolor obramowania: kolor obramowania

Właściwość border-color określa kolor obramowań. Kolory można określić w dowolnym formacie CSS: słowa kluczowe, szesnastkowy lub RGB – w zależności od tego, co jest dla Ciebie wygodniejsze. Analogicznie do poprzedniej właściwości, możesz ustawić jeden kolor dla wszystkich obramowań lub wybrać inny kolor dla każdego obramowania.

Kolor obramowania: #FFFF00;

Możesz także ustawić przezroczysty kolor, pisząc:

Kolor obramowania: przezroczysty;

Styl obramowania: styl obramowania

Dzięki właściwości border-style możesz zamienić zwykłą ramkę w kropkowaną, podwójną lub trójwymiarową - jest ich wiele różne znaczenia. Aby to zrobić, użyj następujących słów kluczowych:

• solidna - solidna granica;
• kropkowana - granica kropek;
• przerywana - kropkowana granica;
• podwójna - podwójna granica;
• rowek - granica karbu objętościowego;
• kalenica - obszerna ramka z grubą krawędzią (w zasadzie odwrócenie poprzedniego stylu);
• początek - wytłaczana krawędź;
• wstawka - wcięta ramka (w zasadzie odwrócenie poprzedniego stylu).

Podobnie jak w przypadku właściwości border-width i border-color, każdemu obramowaniu bloku można nadać inny styl - na przykład górne i dolne obramowanie można ustawić jako przerywane, a prawe i lewe obramowanie podwójne. Tutaj wszystko zależy wyłącznie od wyobraźni.

Styl obramowania: podwójna kropka;

Notatka: V różne przeglądarki wygląd granice mogą się nieznacznie różnić.

Wspólna granica właściwości CSS: 3 w 1

Aby nadać styl obramowaniu, nie musisz po kolei używać wszystkich trzech powyższych właściwości. Wystarczy znać ogólną uniwersalną granicę właściwości CSS, za pomocą której napiszesz styl znacznie szybciej i zaoszczędzisz miejsce. Aby to zrobić, zapisz wartości wszystkich trzech właściwości w losowej kolejności:

Obramowanie: 2 piksele z kropkami #FF0000;

Granice poszczególnych partii

Z pomocą dodatkowe właściwości border w CSS, możesz indywidualnie stylizować obramowanie każdego bloku. Pomogą Ci w tym następujące właściwości:

• border-top - styl górnej krawędzi;
• border-right - dla prawej granicy;
• border-bottom - dla dolnej granicy;
• border-left - dla lewej krawędzi.

Wyniki

Teraz, gdy wiesz, jak tworzyć obramowania bloków, możesz poćwiczyć ich tworzenie. Istnieje wiele sposobów na zwięzłe opisanie stylu bez umieszczania w nim zbyt wielu linijek. Plik CSS. Ważną rolę odgrywa tu znajomość zasad kaskadowych arkuszy stylów. Spójrzmy na przykład.

Załóżmy, że chcesz utworzyć obramowanie elementu div z trzema jednolitymi szarymi obramowaniami i przerywaną zieloną dolną krawędzią. Możesz napisać ten styl w ten sposób:

Div ( obramowanie po prawej: 8px double #FF0000; obramowanie po lewej stronie: 8px double #FF0000; obramowanie u dołu: 8px double #FF0000; obramowanie u góry: 4px z kropkami #FDD201; )

Ale to jest za długi post. Wszystko to można krótko napisać:

Div (obramowanie: 8 pikseli podwójne #FF0000; obramowanie u góry: 4 piksele z kropkami #FDD201; )

Jak wspomniano powyżej, tutaj skorzystamy z kaskadowych właściwości CSS. Najpierw rejestrujemy styl dla wszystkich czterech boków ramki, a następnie określamy styl osobno dla dolnej krawędzi, tym samym częściowo nadpisując poprzedni styl. Bardzo ważne jest przestrzeganie tej sekwencji linii.

Mini-zadanie

Spróbuj utworzyć obramowanie elementu div o wymiarach 200x200 pikseli. Style ramki powinny wyglądać następująco:

• Spraw, aby górna i dolna granica była solidna solidny, nadaj im ten sam wybrany kolor i szerokość 5 pikseli.
• Zrób lewą granicę przerywany, szerokości 3 piksele, wybierz kolor inny niż poprzedni.
• Podwój prawą granicę podwójnie, szerokość 7 pikseli, inny kolor niż poprzednie dwa.

Ostatecznie Twoja praca powinna wyglądać tak (poza kolorem, który wybierzesz):

Wynik zadania (wyświetl w Chrome)

Aby kontrolować granicę elementu, użyj ogólnej właściwości border. Ta właściwość umożliwia ustawienie grubości, stylu i koloru obramowania elementu w jednej deklaracji.

Te trzy właściwości (grubość obramowania, styl obramowania i kolor) można ustawić w jednej deklaracji. Oto przykład:

Można określić styl obramowania tylko po jednej stronie elementu. Aby to zrobić, użyj właściwości border-top (górna granica), border-right (prawa granica), border-bottom (dolna granica), border-left (lewa granica).

W tym przykładzie każda strona bloku ma inną grubość obramowania, styl i kolor.

Zastanów się, jak możesz stworzyć taki kształt za pomocą CSS:

Wartości obramowania - grubość, styl i kolor - można ustawić osobno za pomocą specjalnych właściwości.

• styl obramowania - styl obramowania.
• border-width - szerokość obramowania.
• kolor obramowania - kolor obramowania.

Rozważmy każdą z wartości osobno.

nieruchomość w stylu granicznym Styl graniczny.

Właściwość border-style ustawia styl obramowania. W CSS, w Różnice w HTMLu, granica elementu może być nie tylko bryła. Dla stylu obramowania akceptowane są następujące wartości:

1. brak — brak obramowania (domyślnie).
2. solidna - solidna granica.
3. podwójna - podwójna granica.
4. przerywana - kropkowana granica.
5. kropkowana - obramowanie utworzone z szeregu kropek.
6. grzbiet - granica „grzbietu”.
7. rowek - granica „rowka”.
8. wstawka - obniżona krawędź.
9. początek - wytłaczana krawędź.

Przykłady jak wyglądają.

bez granicy (brak)

solidna granica

podwójna granica

granica szeregu kropek (kropkowana)

przerywana granica

granica rowka

granica grzbietu

wcięta ramka (wstawka)

wytłaczana granica (początek)

Nawiasem mówiąc, jeśli ustawisz kolor obramowania dla ramki kalenicowej na czarny, otrzymasz taki wynik.

Blok div z czarną ramką i stylem grzbietu.

Ramka wygląda solidnie, ale to dlatego, że styl grzbietu jest tworzony przez dodanie efektu czarnego cienia, a efekt czerni nie jest widoczny na czarnej ramce.

Korzystając z właściwości border-style, styl obramowania można ustawić nie tylko dla wszystkich stron bloku. Możliwe jest ustawienie kilku wartości dla jednej właściwości stylu obramowania; w zależności od liczby wartości zostanie przypisany styl obramowania inny numer stronach bloku. Można ustawić jedną, dwie, trzy lub cztery wartości. Przyjrzyjmy się przykładom dla każdego przypadku.

Jedna wartość (pełna) - styl obramowania jest ustawiony dla wszystkich stron bloku.

Dwie wartości (pełne podwójne) - pierwsza wartość określa styl góry i dolne strony, drugi z boku.

Trzy wartości (ciągła podwójna kropka) - pierwsza wartość dla górnej strony, druga dla boków, trzecia dla dołu.

Cztery wartości (ciągła podwójna kropka, przerywana) - każda wartość dla jednej strony zgodnie z ruchem wskazówek zegara, zaczynając od góry.

Właściwość szerokości obramowania. Grubość obramowania.

Aby ustawić szerokość obramowania elementu, użyj właściwości border-width. Grubość obramowania można ustawić dowolną jednostki absolutne pomiary, na przykład w pikselach.

Podobnie jak w przypadku właściwości border-style, właściwość można również ustawić na jedną do czterech wartości. Przyjrzyjmy się przykładom dla każdego przypadku.

Przykładowy kod:

Istnieją również wartości słów kluczowych dla właściwości border-width. W sumie są trzy:

• cienka - cienka granica;
• średni - średnia grubość;
• gruba - gruba granica;

Grubość obramowania: cienka.

Grubość krawędzi: średnia.

Grubość obramowania: gruba.

Właściwość koloru obramowania. Kolor ramki.

Aby kontrolować kolor obramowania, użyj narzędzia koloru obramowania. Kolory dla tej właściwości można ustawić dowolną metodą opisaną w artykule „Kolory w CSS”, a mianowicie:

• Zapis szesnastkowy (#ff00aa) koloru.
• formacie RGB- rgb(255,12,110) . formacie RGBA dla CSS3.
• Formaty HSL i HSLA dla CSS3.
• Nazwa koloru, na przykład czarny. Pełną listę nazw kolorów znajdziesz w tabeli Nazwy kolorów CSS.

Właściwość border-color może również mieć od jednej do czterech wartości i traktuje je podobnie jak poprzednie właściwości.

Jedna wartość (czerwony).

Dwie wartości (czerwony czarny).

Trzy wartości (czerwony czarny żółty).

Cztery wartości (czerwony czarny żółty niebieski).

Wróćmy teraz do problemu przedstawionego powyżej i narysujmy rysunek:

Oto kod rysujący taką figurę, tylko w większym rozmiarze:

Ustawianie wartości dla boków osobno

Wspomniano powyżej, że można określić wartości właściwości brzegowych tylko dla jednej strony bloku. Istnieją właściwości do tych celów:

• border-top (górna granica)
• granica prawa
• granica-dół
• obramowanie w lewo (lewe obramowanie)

Przypominam, że dla wszystkich właściwości określone są trzy wartości (grubość, styl i kolor) w dowolnej kolejności. Istnieją jednak właściwości, które pozwalają ustawić grubość, kolor i styl dla każdej strony osobno. Zapis tych właściwości wynika z powyższego.

Opcje górnego obramowania (obramowanie u góry).

• border-top-color - ustawia kolor górnej krawędzi elementu.
• border-top-width - ustawia grubość górnej granicy elementu.
• border-top-style - ustawia styl górnej krawędzi elementu.

Opcje prawej granicy (prawa granica).

• border-right-color - ustawia kolor prawej krawędzi elementu.
• border-right-width - ustawia grubość prawej krawędzi elementu.
• border-right-style - ustawia styl prawej krawędzi elementu.

Opcje dolnej krawędzi (obramowanie-dół).

• border-bottom-color - ustawia kolor dolnej krawędzi elementu.
• border-bottom-width - ustawia grubość dolnej krawędzi elementu.
• border-bottom-style - ustawia styl dolnej krawędzi elementu.

Opcje lewej krawędzi (obramowanie po lewej stronie).

• border-left-color - ustawia kolor lewej krawędzi elementu.
• border-left-width - ustawia grubość lewej krawędzi elementu.
• border-left-style - ustawia styl lewej krawędzi elementu.

Przykład wykorzystania tych właściwości:

Właściwość granicy-promień. Zaokrąglanie narożników granicznych.

Właściwość border-radius przeznaczona jest do zaokrąglania rogów granic elementu. Ta właściwość pojawiła się w CSS3 i we wszystkich działa poprawnie nowoczesne przeglądarki, z wyjątkiem Internet Explorera 8 (i starsze wersje).

Wartościami mogą być dowolne liczby używane w CSS.

Właściwość promienia obramowania: 15px.

Jeśli ramka blokowa nie zostanie określona, ​​wówczas zaokrąglenie nastąpi z tłem. Oto przykład zaokrąglonego bloku bez obramowania, ale z kolorem tła:

Właściwość promienia obramowania: 15px.

Istnieją właściwości zaokrąglania poszczególnych narożników elementu. W tym przykładzie wykorzystano je wszystkie:

Promień obramowania w lewym górnym rogu: 15 pikseli; promień-prawy-górny-prawy: 0; Promień-prawy-dolny-obramowanie: 15px; Promień obramowania-dolnego-lewego: 0;

Właściwość promienia obramowania: 15px.

Chociaż ten kod można zapisać w jednej deklaracji: border-radius : 15px 0 15px 0 . Faktem jest, że właściwość border-radius można ustawić od jednej do czterech wartości. Poniższa tabela przedstawia zasady rządzące takimi ogłoszeniami.

Po dokładnym przestudiowaniu tej tabeli możesz zrozumieć, że jest to najkrótszy wpis pożądany styl będzie wyglądać następująco: promień obramowania: 15px 0 . Istnieją tylko dwa znaczenia.

Trochę praktyki

Rysowanie cytryny za pomocą CSS.

Oto kod takiego bloku:

Margines: 0 automatyczny; /* Wyśrodkuj blok */ szerokość: 200px; wysokość: 200px; tło: #F5F240; obramowanie: 1px bryła #F0D900; promień obramowania: 10px 150px 30px 150px;

Narysowaliśmy już rysunek:

Teraz zostawmy z tego trójkąt:

Kod trójkąta to:

Margines: 0 automatyczny; /* Wyśrodkuj blok */ padding: 0px; szerokość: 0px; wysokość: 0; obramowanie: 30 pikseli w kolorze białym; kolor dolnego obramowania: czerwony;

W poprzednim artykule omówiliśmy użycie Właściwości CSS obramowania () elementy strony. Obiecałam Ci, że powiem Ci, jak używać obrazków do rysowania granic. O tym właśnie dzisiaj porozmawiamy.

Aby użyć obrazów do tworzenia obramowań, użyjemy właściwości CSS border-image.

Grubość obramowań jest ustawiana przez właściwość i jeśli określono obramowanie: 0 to obramowanie nie jest wyświetlane. W przypadku innych wartości brzegowych obraz zawsze ma pierwszeństwo. Tło, jeśli zostało określone za pomocą właściwości tła, jest wyświetlane pod ramką.

Składnia kodu

Spójrzmy na przykładowy zapis nieruchomości:

url (images/bg-image.png) — adres obrazka tła.

30 - może występować jedna, dwie, trzy lub cztery wartości wskazujące rozmiary części obrazu w pikselach, określając w ten sposób obszary podziału obrazu. Same jednostki nie są zapisywane, tylko liczba (10, a nie 10px). Na rysunku czerwonymi liniami zaznaczono obszary niezbędne do utworzenia ramki.

Można użyć jednej, dwóch, trzech lub czterech wartości oddzielonych spacją. Efekt zależy od liczby wartości i jest pokazany w tabeli.

round round — dwa parametry (odpowiednio dla krawędzi poziomych i pionowych). Może przyjmować jedną z trzech wartości. Rezultat można zobaczyć na zdjęciach.

rozciągać się— Rozciąga rysunek obramowania do rozmiaru elementu. Jest to wartość domyślna.
powtarzać— Powtarza wzór obramowania.
okrągły— Powtarza rysunek i skaluje go tak, aby po stronie elementu znajdowała się całkowita liczba obrazów.

Zgodność przeglądarki

Niestety nie wszystkie wersje przeglądarek obsługują właściwość border-image. Dla lepsza kompatybilność Wskazane jest zarejestrowanie obiektu dla wszystkich przeglądarek.

Przykładowy kod:

Automatyzacja

W Internecie istnieją narzędzia, które pomagają nam pisać kod. Istnieje bardzo wygodny konstruktor właściwości border-image. Po prostu wgraj tam swój obraz obramowania (swoją drogą, w Internecie znajdziesz ich mnóstwo). Za pomocą suwaków podziel obraz na obszary, ustaw grubość obramowania i parametry powtarzalności.

Co więcej, natychmiast w tryb online widzisz rezultat (co się stanie na końcu).

Gdy osiągniesz zamierzony efekt wystarczy, że skopiujesz wygenerowany kod i wkleisz go do kodu strony (pliku css).

Bardzo proste i wygodne.

Wniosek

Na tym kończy się nasza dyskusja na temat właściwości brzegowych w CSS. Nie żegnam się z tobą. W najbliższym czasie będziemy kontynuować szkolenia z układu. Zapisz się na aktualizacje... i... Do zobaczenia!

Wład Merzewicz

Korzystając z CSS, możesz dodać obramowanie do elementu na kilka sposobów. W zasadzie wykorzystywana jest oczywiście właściwość border, jako najbardziej uniwersalna, a także kontur i, co zaskakujące, box-shadow, którego głównym zadaniem jest stworzenie cienia. Następnie rozważymy te metody i ich różnice między sobą.

zarys właściwości

Najprostsza właściwość tworzenia ramek. Ma takie same parametry jak border , ale różni się znacząco niektórymi szczegółami:

• wokół elementu wyświetlany jest kontur (obramowanie wewnątrz);
• obrys nie ma wpływu na wymiary elementu (obramowanie dodawane jest do szerokości i wysokości elementu);
• obrys można ustawić tylko wokół całego elementu, ale nie po poszczególnych stronach (obramowanie można zastosować dla dowolnej strony lub wszystkich naraz);
• Promień zaokrąglenia określony przez właściwość border-radius nie ma wpływu na obrys (wpływa na granicę).

Powstaje pytanie – w jakich przypadkach kontur jest potrzebny, gdy jego rolę, pomimo wymienionych różnic, całkowicie przejmuje granica? Sytuacji nie jest wiele, ale zdarzają się:

• tworzenie skomplikowanych wielobarwnych ramek;
• dodanie ramki do elementu po najechaniu na niego myszką;
• ukrywanie obramowania, które przeglądarka automatycznie dodaje do niektórych elementów po uzyskaniu fokusu;
• w przypadku konturu możesz ustawić odległość od krawędzi elementu do ramki za pomocą właściwości konturu-offset, aby utworzyć plik .

Wielokolorowe ramki

Musisz zrozumieć, że kontur w żaden sposób nie zastępuje granicy i może z łatwością istnieć razem z nią, jak pokazano w przykładzie 1.

Przykład 1: Tworzenie ramki

W tym przykładzie wokół elementu dodana jest czarna ramka, która jest oddzielona od tła białą ramką (ryc. 1).

Ryż. 1. Obramuj element

Ramka podczas używania: najedź

Kiedy dodajemy ramkę poprzez border, szerokość elementu wzrasta, co jest dość zauważalne przy łączeniu borderu z pseudoklasą :hover. Można to „wygrać” na dwa sposoby. Najprościej jest zastąpić border obrysem, co jak wiemy nie wpływa na wielkość elementu (przykład 2).

Przykład 2: Ramka po najechaniu myszką

kontur nie zawsze jest odpowiedni, choćby dlatego, że zaokrąglanie rogów nie ma na to wpływu. Odpowiedni jest tu drugi sposób - dodaj niewidoczną ramkę lub ramkę dopasowaną do koloru tła, a następnie po najechaniu myszką zmień jej parametry (przykład 3). Nie nastąpi wówczas żadne przemieszczenie elementu, ponieważ rama początkowo już istnieje. Ale zawsze pamiętamy, że szerokość elementu to suma wartości szerokości, obramowania po lewej stronie i obramowania po prawej stronie. Podobnie sytuacja wygląda w przypadku wzrostu.

Przykład 3: Ramka po najechaniu myszką

Obramowanie pól formularza

W niektórych przeglądarkach (Chrome, Safari, najnowsze wersje Opera) po uzyskaniu ostrości wokół pól formularzy wyświetlana jest mała kolorowa ramka (rys. 2). Aby go usunąć, po prostu dodaj wartość none do właściwości konspektu w stylach, jak pokazano w przykładzie 4.

Ryż. 2. Obramuj marginesy

Przykład 4. Demontaż ramy

Ramki za pomocą cienia pudełkowego

Chociaż właściwość box-shadow ma na celu dodanie cienia wokół elementu, można jej również użyć do utworzenia obramowań, których nie można utworzyć za pomocą obramowania lub konturu. Wszystko to dzięki temu, że ilość cieni może być nieograniczona, a parametry których wymienione są oddzielone przecinkami.

Aby uzyskać kadr, należy ustawić pierwsze trzy parametry na zero, to one odpowiadają za położenie cienia i jego rozmycie. Czwarty parametr w w tym przypadku odpowiada za grubość obramowania, a piąty ustala kolor obramowania. Dla drugiej ramy czwarty parametr jest równy sumie grubości dwóch ram.

Przykład 4 pokazuje, jak dodać dwie ramki i jedną ramkę po prawej stronie, używając pojedynczej właściwości box-shadow.

Przykład 4: Użycie cienia pudełkowego

Wynik ten przykład pokazany na ryc. 3.

Ryż. 3. Ramki utworzone za pomocą właściwości box-shadow