Właściwość generyczna border służy do kontrolowania granicy elementu. Ta właściwość umożliwia ustawienie szerokości, stylu i koloru obramowania elementu w jednej deklaracji.
Te trzy właściwości (szerokość, styl i kolor obramowania) można ustawić w jednej deklaracji. Oto przykład:
Styl obramowania można określić 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 swoją własną grubość, styl i kolor obramowania.
Pomyśl o tym, jak Pomoc CSS możesz stworzyć taki kształt:
Wartości obramowania - grubość, styl i kolor - można ustawić osobno za pomocą specjalnych właściwości.
- border-style - styl obramowania.
- border-width - szerokość granicy.
- border-color - kolor obramowania.
Rozważmy każdą z wartości osobno.
Właściwość border-style. Styl obramowania.
Właściwość border-style ustawia styl granicy. W CSS, w przeciwieństwie do HTML, obramowanie elementu może być czymś więcej niż tylko solidnym. Prawidłowe wartości stylu obramowania to:
- none - brak obramowania (domyślnie).
- solidny - solidna granica.
- podwójne - podwójne obramowanie.
- przerywana - przerywana granica.
- dotted - obramowanie składające się z serii kropek.
- grzbiet - granica „grzbietu”.
- rowek - granica „rowek”.
- wstawka - obramowanie wstawki.
- początek - obramowanie ekstrudowane.
Przykłady tego, jak wyglądają.
bez obramowania (brak)
solidne obramowanie (pełne)
podwójna ramka (podwójna)
kropkowane obramowanie (kropkowane)
kropkowane obramowanie (przerywane)
granica rowka (rowek)
granica grzbietu
wcięte obramowanie (wstawka)
obramowanie ekstrudowane (początek)
Przy okazji, jeśli ustawisz kolor obramowania na czarny dla obramowania kalenicy, otrzymasz następujący wynik.
Blok div z czarną ramką i stylem kalenicy.
Ramka wygląda jak solid , ale to dlatego, że styl kalenicy jest tworzony przez dodanie efektu czarnego cienia, a czarny efekt na czarnej ramce nie jest widoczny.
Za pomocą właściwości border-style styl obramowania można ustawić nie tylko dla wszystkich stron bloku. Możliwe jest ustawienie wielu wartości dla tej samej właściwości border-style, w zależności od liczby wartości, styl obramowania zostanie przypisany do różnej liczby boków bloku. Możesz ustawić jedną, dwie, trzy lub cztery wartości. Spójrzmy na przykłady dla każdego przypadku.
Jedna wartość (pełna) — styl obramowania jest ustawiony dla wszystkich stron bloku.
Dwie wartości (solid double) – pierwsza wartość określa styl dla strony górnej i dolnej, druga dla boku.
Trzy wartości (pełne podwójne kropki) - pierwsza wartość dla strony górnej, druga dla boków, trzecia dla dołu.
Cztery wartości (jednolita, podwójna kropkowana przerywana) - każda wartość dla jednej strony zgodnie z ruchem wskazówek zegara od góry.
Właściwość granicy szerokości. Grubość obramowania.
Właściwość border-width służy do ustawiania szerokości krawędzi elementu. Grubość obramowania można określić w dowolnej bezwzględnej jednostce miary, takiej jak piksele.
Podobnie jak właściwość border-style, właściwość można również ustawić na jedną do czterech wartości. Rozważ przykłady 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;
- średnia - średnia grubość;
- gruba - gruba granica;
Grubość obramowania: cienka.
Grubość obrzeża: średnia.
Grubość obramowania: gruba.
Właściwość border-color. Kolor ramki.
Funkcja border-color służy do kontrolowania koloru obramowania. Kolory dla tej właściwości można ustawić za pomocą dowolnej z metod opisanych w artykule Kolory w CSS, a mianowicie:
- Zapis szesnastkowy (#ff00aa ) koloru.
- Format RGB to rgb(255,12,110) . Format RGBA dla CSS3.
- Formaty HSL i HSLA dla CSS3.
- Nazwa koloru, na przykład czarny (czarny). Pełna lista Nazwy kolorów są wymienione 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 do poprzednich właściwości.
Jedna wartość (czerwona).
Dwie wartości (czerwony czarny).
Trzy wartości (czerwony czarny żółty).
Cztery wartości (czerwony czarny żółty niebieski).
Wróćmy teraz do zadania omówionego powyżej i narysuj figurę:
Oto kod, który rysuje taki kształt, tylko większy:
Ustawianie wartości dla boków osobno
Jak wspomniano powyżej, możesz określić wartości właściwości granicznych tylko dla jednej strony pudełka. Do tych celów istnieją właściwości:
- border-top (górna ramka)
- border-right (prawe obramowanie)
- border-bottom (dolna ramka)
- border-left (lewa ramka)
Przypomnę, że dla wszystkich nieruchomoś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 wywodzi się z powyższego.
Opcje górnego obramowania (border-top ).
- border-top-color - ustawia kolor górnej granicy elementu.
- border-top-width - ustawia szerokość górnej granicy elementu.
- border-top-style - ustawia styl górnej granicy elementu.
Opcje prawego obramowania (border-right ).
- border-right-color - ustawia kolor prawej krawędzi elementu.
- border-right-width - ustawia szerokość prawej krawędzi elementu.
- border-right-style - ustawia styl prawej krawędzi elementu.
Opcje dolnego obramowania (border-bottom ).
- border-bottom-color - ustawia kolor dolnej granicy elementu.
- border-bottom-width - ustawia szerokość dolnej granicy elementu.
- border-bottom-style - ustawia styl dolnej granicy elementu.
Opcje lewej krawędzi (border-left ).
- border-left-color - ustawia kolor lewej krawędzi elementu.
- border-left-width - ustawia szerokość lewej krawędzi elementu.
- border-left-style - ustawia styl lewej krawędzi elementu.
Przykład wykorzystania tych właściwości:
- przedefiniowano kolor górnej krawędzi za pomocą właściwości border-top-color na czerwony,
- przy użyciu właściwości border-right-width grubość prawego obramowania jest ustawiona na 10px,
- przy użyciu właściwości border-bottom-style, styl dolnej krawędzi zostaje przedefiniowany na podwójny,
- przy użyciu właściwości border-left-color lewe obramowanie jest ustawiane na kolor niebieski.
Właściwość granica-promień. Zaokrąglanie rogów granicy.
Właściwość border-radius służy do zaokrąglania rogów granic elementu. Ta właściwość pojawiła się w CSS3 i działa poprawnie we wszystkich nowoczesne przeglądarki, z wyjątkiem Internet Explorer 8 (i starsze wersje).
Wartości mogą być dowolną liczbą używaną w CSS.
promień obramowania nieruchomości: 15px.
Jeśli ramka blokowa nie jest ustawiona, następuje zaokrąglanie z tłem. Oto przykład zaokrąglania bloków bez obramowania, ale z kolorem tła:
promień obramowania nieruchomości: 15px.
Istnieją właściwości umożliwiające zaokrąglanie poszczególnych narożników elementu. Ten przykład wykorzystuje je wszystkie:
obramowanie-górny-lewy-promień: 15px; obramowanie-górny-prawy-promień: 0; obramowanie-dolny-prawy-promień: 15px; obramowanie-dolny-lewy-promień: 0;
promień obramowania nieruchomości: 15px.
Chociaż ten kod można zapisać w jednej deklaracji: border-radius : 15px 0 15px 0 . Faktem jest, że dla właściwości border-radius można ustawić od jednej do czterech wartości. Poniższa tabela podsumowuje zasady rządzące takimi deklaracjami.
Po uważnym przestudiowaniu tej tabeli możesz zrozumieć, że najkrótszym wpisem dla pożądanego stylu będzie: border-radius : 15px 0 . Są tylko dwie wartości.
Trochę praktyki
Narysuj cytrynę za pomocą CSS.
Oto kod takiego bloku:
Marża: 0 auto; /* Wyśrodkuj blok */ width: 200px; wysokość: 200px; tło: #F5F240; obramowanie: 1px stałe #F0D900; obramowanie-promień: 10px 150px 30px 150px;
Narysowaliśmy już figurę:
Teraz zostawmy z tego trójkąt:
Kod trójkąta to:
Marża: 0 auto; /* Wyśrodkuj blok */ padding: 0px; szerokość: 0px wysokość: 0; obramowanie: 30px stałe białe; kolor obramowania na dole: czerwony;
Jestem pewien, że znasz już właściwość css border. Czy dowiesz się czegoś nowego o css border, czego nie wiedziałeś wcześniej? Cóż, nie tylko nauczysz się, ale także zobaczysz nowe rzeczy, których nigdy wcześniej nie znałeś!
CSS3 można nie tylko wykorzystać do zaokrąglania narożników, ale czysty kod CSS można wykorzystać do tworzenia złożonych kształtów. Wcześniej można było użyć obrazu tła, aby uzyskać wrażenie zaokrąglonych rogów. Dzięki nowym technikom obramowania możemy to zrobić w czystym CSS.
Podstawy korzystania z granic css
Prawdopodobnie już znasz standardowe zastosowanie właściwości granicy:
Obramowanie: 1px jednolita czerń;
Powyższy kod wyrenderuje ramkę 1px, która będzie czarna. Prosto i łatwo. Możesz też nieco rozszerzyć składnię:
szerokość obramowania: gruba; styl obramowania: solidny kolor obramowania: czarny
Jako dodatek możesz użyć określonych wartości dla właściwości border-width, trzech słów kluczowych: cienki, średni, gruby.
Ale używanie rozszerzonej składni nie zawsze jest praktyczne. Spójrzmy na przykład, w którym chcesz zmienić kolor obramowania bloku po najechaniu na niego. W takim przypadku użycie skróconej składni jest znacznie prostsze:
Box ( obramowanie: 1px stałe czerwone; ) .box:hover ( granica: 1px stałe zielone; )
Bardziej eleganckie i prostsze można zrobić w ten sposób:
Box ( obramowanie: 1px stałe czerwone; ) .box:hover ( kolor obramowania: zielony; )
Jak widać, technika zaawansowana przydaje się również wtedy, gdy zmieniamy tylko niektóre właściwości: szerokość, styl, kolor i inne.
promień-granicy
Granica-promień jest „złotą” właściwością CSS3 — pierwszą, najczęściej spotykaną właściwością, która stała się praktyczna i użyteczna. Z wyjątkiem IE8 i niższych, wszystkie przeglądarki wyświetlają z tym zaokrąglone rogi.
Chociaż konieczne jest użycie specjalnych przedrostków dla Webkita i Mozilli, aby stylizacja była poprawna.
webkit-border-radius: 10px; -moz-border-radius: 10px; promień obramowania: 10px
Obecnie możemy usunąć specjalne przedrostki i użyć standardowego kształtu obramowania-promienia.
Dodatkowym atutem jest to, że możemy użyć specjalnych wartości dla każdej strony bloku:
obramowanie-górny-lewy-promień: 20px; obramowanie-górny-prawy-promień: 0; obramowanie-dolny-prawy-promień: 30px; obramowanie-dolny-lewy-promień: 0;
W powyższym kodzie, ustawiając border-top-right-radius i border-bottom-left-radius na „zero”, można uzyskać niesamowite kształty. Chociaż element może dziedziczyć niektóre właściwości, które będą musiały zostać zerowane.
Podobnie jak margines i dopełnienie, możemy skondensować składnię:
/* górny lewy, górny prawy, dolny prawy, dolny lewy */ border-radius: 20px 0 30px 0;
Jako przykład, korzystając z właściwości border-radius, pokażę „cytrynę”, której projektanci często używają przy tworzeniu stron internetowych:
Cytryna (szerokość: 200px; wysokość: 200px; tło: #F5F240; obramowanie: 1px solid #F0D900; obramowanie-promień: 10px 150px 30px 150px; )
Wyjście poza podstawy
U wielu projektantów na tym kończy się cała wiedza z zakresu granicy własności css. Ale jest kilka innych fajnych rzeczy, których możesz użyć do stworzenia niesamowitych rzeczy!
Złożone struktury graniczne css
Istnieje wiele technik projektowania złożonych struktur granicznych. Rozważmy na przykład następujące...
styl obramowania
Zawsze używamy najbardziej znanych właściwości pełnych, przerywanych i kropkowanych. Istnieje jednak kilka innych właściwości stylu obramowania: rowek i grzbiet.
Ramka: rowek 20px #e3e3e3;
Lub w rozszerzonej składni:
kolor obramowania: #e3e3e3; szerokość obramowania: 20px styl obramowania: rowek;
Chociaż te właściwości są przydatne, nie stanowią podstawy do tworzenia skomplikowanych ram.
zarys
Najpopularniejsza technika tworzenia podwójna rama- za pomocą właściwości konturu.
Pudełko ( obramowanie: 5px solid #292929; kontur: 5px solid #e3e3e3; )
Ta metoda działa świetnie, choć ogranicza nas tylko do dwóch klatek. Czasami trzeba stworzyć gradientową granicę składającą się z wielu warstw… jak wtedy?
Pseudoelementy
Gdy technika konspektu nie jest wystarczająca, alternatywnym rozwiązaniem jest użycie pseudoelementów :before i :after. Za pomocą którego możesz dodać dodatkowe obramowania do elementu:
Box ( szerokość: 200px; wysokość: 200px; tło: #e3e3e3; pozycja: względna; obramowanie: 10px stałe zielone; ) /* Utwórz dwa pudełka o tej samej szerokości kontenera */ .box:after, .box:before ( content: ""; pozycja: bezwzględna; góra: 0; lewo: 0; dół: 0; prawo: 0; ) .box:after ( obramowanie: 5px jednolicie czerwony; kontur: 5px jednolicie żółty; ) .box:before ( obramowanie : 10px stałe niebieskie; )
Nie wygląda zbyt elegancko, ale przynajmniej działa. Trochę problematyczne jest radzenie sobie z sekwencją kolorów w ... ale możesz to zrozumieć.
Cień Pudełka
Ciekawym „dziecinnym” sposobem na stworzenie tego efektu jest użycie właściwości box-shadow CSS3:
Box (obramowanie: 5px stałe czerwone; box-shadow: 0 0 0 5px zielony, 0 0 0 10px żółty, 0 0 0 15px pomarańczowy; )
W tym przypadku byliśmy sprytniejsi, korzystając z dedykowanej właściwości box-shadow. Zmieniając parametry x, y, rozmycia na „zero”, możemy użyć różne kolory do tworzenia wielu ramek.
Ale jest problem, w starszych przeglądarkach, które nie rozumieją właściwości box-shadow, widoczna będzie tylko jedna czerwona ramka 5px.
"Pamiętać! Projekt strony powinien wyglądać w różnych przeglądarkach, czyli tak samo we wszystkich przeglądarkach. W tym starsze wersje.
Zmiana kątów
Oprócz użytego prostego promienia obramowania możemy określić dwa oddzielne - rozdzielając je / określimy promień poziomy i pionowy.
Na przykład:
Promień obramowania: 50px / 100px /* promień poziomy, promień pionowy */
... jest to równoznaczne z:
Obramowanie-górny-lewy promień: 50px 100px; obramowanie-prawy-górny-promień: 50px 100px; obramowanie-dolny-prawy-promień: 50px 100px; obramowanie-dolny-lewy-promień: 50px 100px;
Ta technika nadaje się do tworzenia unikalnych kształtów bloków. Na przykład, oto jak stworzyć efekt owiniętego papieru:
Pudełko (szerokość: 200px; wysokość: 200px; tło: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; )
Kształty CSS za pomocą obramowania
Ta technika pokazuje, jak tworzyć formularze CSS, używając elementów o zerowej wysokości i szerokości. Zaskoczony? Spójrzmy na przykład...
W kolejnych kilku przykładach użyjemy następujących znaczników:
…oraz następujący styl podstawowy:
Pudełko (szerokość: 200px; wysokość: 200px; tło: czarne; )
Bardzo wspólny przykład Wykorzystanie CSS kształty - tworzenie płynącej strzałki. Sekret tej strzałki tkwi w stworzeniu obramowania o różnych kolorach dla każdej ze stron. Następnie ustaw atrybuty szerokości i wysokości na 0.
Przypiszmy klasę arrow do bloku div:
Strzałka ( szerokość: 0; wysokość: 0; górna granica: 100 pikseli jednolita czerwona; prawa granica: 100 pikseli jednolita zielona; dolna granica: 100 pikseli jednolita niebieska; lewa granica: 100 pikseli jednolita żółta; )
Aby to zademonstrować, najpierw użyjemy rozszerzonej składni. Następnie możemy usunąć dodatkowy kod za pomocą skróconej składni:
Strzałka ( szerokość: 0; wysokość: 0; obramowanie: 100px solid; kolor obramowania: czerwony zielony niebieski żółty; )
Ciekawe, prawda? Teraz ustawimy przezroczyste kolory ze wszystkich stron z wyjątkiem niebieskiej strony.
Strzałka ( szerokość: 0; wysokość: 0; obramowanie: 100px solid; obramowanie-dolny kolor: niebieski; )
Udało się świetnie! Ale to zaprzecza układ semantyczny, utwórz div .arrow, aby dodać strzałkę do strony. W tym celu możemy wykorzystać pseudoelementy, co zrobimy teraz.
Utwórz dymek
Aby stworzyć dymek, potrzebujemy małego kawałka czysty CSS kod i jeden blok div.
Speech-bubble ( position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* pionowo do środka */ color: white; text-align: center; )
Dymek:po ( content: ""; )
W tym momencie utworzymy strzałkę, którą zrobiliśmy wcześniej, dodamy ją do elementu i wystarczy, że ją ustawimy:
Speech-bubble:after ( content: ""; pozycja: bezwzględna; szerokość: 0; wysokość: 0; obramowanie: 10px stałe; obramowanie-kolor: czerwony zielony niebieski żółty; )
Jeśli chcemy, aby strzałka była skierowana w dół, będziemy musieli ustawić wszystko obramowanie przezroczyste z wyjątkiem górnego.
Speech-bubble:after ( content: ""; pozycja: bezwzględna; szerokość: 0; wysokość: 0; obramowanie: 10px solid; border-top-color: czerwony; )
Kiedy to tworzymy Formularz CSS, nie możemy konkretnie określić rozmiaru strzałki. Zamiast tego możemy ustawić właściwość border-width, która ustawi rozmiar strzałki. Ustawimy również pozycję strzałki na dole pośrodku. W związku z tym używamy do tego wartości górnej i lewej.
Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; )
Ponadto pozostaje nam nadać kolor taki sam jak kolor bloku. Pamiętaj, że podczas pozycjonowania musisz wziąć pod uwagę wielkość innych niewidocznych ramek (15px). Podamy również zaokrąglenie bloku na rogach.
Speech-bubble ( /* ... inne style */ border-radius: 10px; ) .speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border -top -color: #292929; top: 100%; left: 50%; margin-left: -15px; /* dostosuj szerokość obramowania */ )
Nieźle, co? Korzystając z kilku klas CSS i sztuczek granicznych, możesz stworzyć coś takiego.
/* Użycie dymków: Zastosuj klasy .speech-bubble i .speech-bubble-DIRECTION, jak pokazano poniżej
Premia! Centrowanie w pionie w bloku
W przypadku pojedynczego wiersza tekstu można użyć wysokości wiersza. Ale jeśli masz dwa lub więcej wierszy tekstu... najlepsze rozwiązanie ustawi właściwość wyświetlania na table i umieści cały tekst w akapicie. Oto jak to wygląda na znaczniki html:
Speech-bubble ( /* inne style */ display: table; ) .speech-bubble p ( display: table-cell; vertical-align: middle; )
Nie ograniczamy się do trójkątów. CSS może wyświetlać różne kształty - nawet serca i znak zagrożenia biologicznego.
Biohazard (szerokość: 0; wysokość: 0; obramowanie: 60px solid; obramowanie-promień: 50%; obramowanie-górny-kolor: czarny; obramowanie-dolny-kolor: czarny; obramowanie-lewy-kolor: żółty; obramowanie-prawo- kolor żółty;)
Wniosek
Kilka lekcji wcześniej przyjrzeliśmy się schematycznej reprezentacji bloku strony internetowej, a także pokrótce omówiliśmy taką właściwość CSS, jak border , za pomocą której można ustawić ramki dla elementu. Tym razem przyjrzymy się tej właściwości bardziej szczegółowo na przykładach.
Krawędź znajduje się pomiędzy marginesem a wyściółką. Oznacza to, że marża wynosi za granica. Ramka może być ustawiona zarówno ze wszystkich czterech stron (jak zamykając blok w ramce), jak iz jednej, dwóch lub trzech stron. W CSS możesz kontrolować grubość, kolor i styl obramowań. Przyjrzyjmy się temu bardziej szczegółowo.
border-width: szerokość granicy
Właściwość border-width ustawia szerokość granicy. Najczęściej ten rozmiar określany jest w pikselach. Możesz ustawić takie same lub różne szerokości dla wszystkich czterech obramowań, na przykład:
/* wszystkie 4 obramowania mają szerokość 2px: */ border-width: 2px; /* górna i dolna krawędź mają szerokość 2px, lewa i prawa szerokość 4px: */ border-width: 2px 4px; /* górna ramka - 2px, lewa i prawa - 6px, dolna - 3px: */ border-width: 2px 6px 3px; /* górna ramka - 2px, prawa - 3px, dół - 4px, lewa - 5px: */ border-width: 2px 3px 4px 5px;
Dodatkowo są słowa kluczowe określające szerokość obramowania:
- cienka - szeroka ramka 2px;
- średnia - szeroka ramka 4px;
- grube - obramowanie o szerokości 6px.
kolor obramowania: kolor obramowania
Właściwość border-color ustawia kolor obramowań. Kolory można określić w dowolnym formacie CSS: słowa kluczowe, szesnastkowy lub RGB, w zależności od tego, który jest dla Ciebie wygodniejszy. Analogicznie do poprzedniej właściwości, możesz ustawić jeden kolor dla wszystkich obramowań lub wybrać różne kolory dla każdej obramowania.
Kolor obramowania: #FFFF00;
Możesz również ustawić przezroczysty kolor, pisząc:
kolor obramowania: przezroczysty;
styl obramowania: styl obramowania
Dzięki właściwości border-style możesz zrobić zwykłą ramkę przerywaną, podwójną, trójwymiarową - istnieje wiele różnych wartości. Aby to zrobić, użyj następujących słów kluczowych:
- solidny - solidna granica;
- kropkowana - przerywana granica;
- przerywana - przerywana granica;
- podwójna - podwójna granica;
- rowek - trójwymiarowa granica rowka;
- grzbiet - wolumetryczna granica z grubą krawędzią (w rzeczywistości odwrócenie poprzedniego stylu);
- początek - obramowanie ekstrudowane;
- wstawka - wcięcie obramowania (zasadniczo odwrotność poprzedniego stylu).
Podobnie jak w przypadku właściwości border-width i border-color, styl obramowania każdego pola może mieć inny styl — na przykład można ustawić przerywane obramowanie górne i dolne, a prawe i lewe obramowania są podwójne. Tutaj wszystko zależy tylko od wyobraźni.
Styl obramowania: podwójna kropka;
Notatka: w różne przeglądarki wygląd granice mogą się nieznacznie różnić.
Ogólna granica właściwości CSS: 3 w 1
Nie jest konieczne używanie po kolei wszystkich trzech powyższych właściwości, aby ustawić styl obramowania. Wystarczy znać ogólną uniwersalną granicę właściwości CSS, dzięki której znacznie szybciej napiszesz styl i zaoszczędzisz miejsce. Aby to zrobić, w dowolnej kolejności zapisz wartości dla wszystkich trzech właściwości:
Obramowanie: 2px z kropkami #FF0000;
Obramowania dla poszczególnych stron
Dzięki dodatkowym właściwościom obramowania 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 granicy;
- border-right - dla prawej granicy;
- border-bottom - dla dolnej granicy;
- border-left - dla lewej granicy.
Wyniki
Teraz, gdy już wiesz, jak tworzyć obramowania do pudełek, możesz poćwiczyć ich tworzenie. Istnieje wiele sposobów na zwięzłe opisanie stylu bez konieczności pisania zbyt wielu wierszy w pliku CSS. Ważną rolę odgrywa tutaj znajomość zasad tworzenia kaskadowych arkuszy stylów. Rozważ przykład.
Załóżmy, że chcesz obramować div trzema pełnymi szarymi obramowaniami i ustawić dolną granicę przerywaną na zielono. Możesz napisać ten styl tak:
Div ( border-right: 8px double #FF0000; border-left: 8px double #FF0000; border-bottom: 8px double #FF0000; border-top: 4px z kropkami #FDD201; )
Ale to zdecydowanie za długo. Wszystko to można w skrócie napisać:
Div (obramowanie: 8px podwójne #FF0000; górne obramowanie: 4px z kropkami #FDD201; )
Jak wspomniano powyżej, tutaj wykorzystamy kaskadowe właściwości CSS. Najpierw piszemy styl dla wszystkich czterech boków ramki, a następnie określamy styl osobno dla dolnej krawędzi, w ten sposób częściowo nadpisując poprzedni styl. Bardzo ważne jest przestrzeganie tej kolejności linii.
mini-zadanie
Spróbuj utworzyć ramkę div o wymiarach 200 x 200 pikseli. Style ramki powinny wyglądać tak:
- Ustaw górną i dolną granicę solidną solidny, nadaj im ten sam wybrany kolor i szerokość 5px.
- Zrób lewą granicę kropkowana przerywana, szerokość 3 piksele, wybierz kolor inny niż poprzedni.
- Ustaw prawą ramkę podwójnie podwójnie, szerokość 7 pikseli, kolor inny niż dwa poprzednie.
Ostatecznie Twoja praca powinna wyglądać tak (z wyjątkiem koloru, który sam wybierzesz):
Wynik zadania (wyświetl w Chrome)
Ramka CSS Element to jedna lub więcej linii otaczających zawartość elementu i jego dopełnienie . Granica jest ustalana za pomocą krótkiej granicy właściwości. Styl ramki jest ustawiany za pomocą trzech właściwości: styl, kolor I szerokość.
Dekorowanie obramowań i obramowań elementów HTML za pomocą właściwości CSS
1. Styl obramowania
Domyślnie obramowania są zawsze rysowane na górze tła elementu, a tło rozciąga się do zewnętrznej krawędzi elementu. Styl ramki determinuje jej wyświetlanie, bez tego właściwości ramki nie będą w ogóle widoczne. Dla elementu można ustawić obramowanie dla wszystkich stron jednocześnie za pomocą właściwości border-style lub dla każdej strony osobno za pomocą właściwości kwalifikujących border-top-style i tak dalej. Nie dziedziczone.
| styl obramowania (styl obramowania u góry, styl obramowania z prawej strony, styl obramowania u dołu, styl obramowania z lewej) |
|
|---|---|
| Wartości: | |
| Żaden | Wartość domyślna oznacza brak ramki. Usuwa również granicę elementu z grupy elementów o wartości tego zestawu właściwości. |
| ukryty | Odpowiednik brak . |
| kropkowany |
kropkowany |
| przerywany |
przerywany |
| solidny |
solidny |
| podwójnie |
podwójnie |
| rowek |
rowek |
| grzbiet |
grzbiet |
| wstawka |
wstawka |
| początek |
początek |
| {1,4} |
Wymień cztery różne style dla obramowań elementu naraz, tylko dla właściwości border-style:
|
| Inicjał | |
| dziedziczyć | |
Składnia
P (border-style: solid;) p (border-top-style: solid;)
2. Kolor obramowania kolor obramowania
Właściwość ustawia kolor ramek ze wszystkich stron jednocześnie. Możesz użyć właściwości doprecyzowania, aby ustawić niestandardowy kolor obramowania każdej strony elementu. Jeśli nie określono koloru obramowania, będzie on taki sam jak kolor tekstu elementu. Jeśli element nie zawiera tekstu, kolor obramowania będzie taki sam jak kolor tekstu elementu nadrzędnego. Nie dziedziczone.
| kolor ramki (kolor górnego obramowania, kolor prawy obramowania, kolor dolny obramowania, kolor lewy obramowania) |
|
|---|---|
| Wartości: | |
| przezroczysty | Ustawia przezroczysty kolor ramki. W takim przypadku szerokość ramy pozostaje. Może służyć do zmiany koloru obramowania po najechaniu myszą na element, aby uniknąć przesuwania elementu. |
| kolor | Kolor ramki jest ustawiany za pomocą wartości właściwości. (kolor-obramowania: #cacd58;) |
| {1,4} |
Wymień cztery różne kolory dla obramowań elementu w tym samym czasie, tylko dla właściwości border-color:
|
| Inicjał | Ustawia wartość właściwości na jej wartość domyślną. |
| dziedziczyć | Dziedziczy wartość właściwości z elementu nadrzędnego. |
Składnia
P (kolor obramowania: #cacd58;)
3. Szerokość obramowania
Szerokość ramki jest określana za pomocą jednostek długości lub słów kluczowych. Jeśli właściwość border-style jest ustawiona na none, a obramowanie elementu jest ustawione na pewną szerokość, to w tym przypadku szerokość obramowania jest ustawiona na zero. Nie dziedziczone.
Składnia
P (szerokość obramowania: 2px;)
4. Ustawienie ramy z jedną właściwością
Właściwość border umożliwia łączenie następujących właściwości: border-width , border-style , border-color , na przykład:
Div (szerokość: 100px; wysokość: 100px; obramowanie: 2px jednolity szary; )
W takim przypadku określone właściwości zostaną zastosowane do wszystkich granic elementu jednocześnie. Jeśli jakakolwiek wartość nie zostanie określona, jej miejsce zajmie wartość domyślna.
5. Ustawienie ramki dla jednej granicy elementu
W przypadku konieczności ustawienia inny styl obramowania elementów, możesz użyć skrótu dla odpowiedniego obramowania.
Wymienione poniżej właściwości łączą następujące właściwości w jedną deklarację: border-width , border-style i border-color . Lista właściwości jest określona w podanej kolejności, przy czym jedną lub dwie wartości można pominąć, w takim przypadku ich wartości przyjmą wartości domyślne.
Styl górnej granicy jest ustawiany za pomocą właściwości border-top , dolna krawędź to border-bottom , lewa krawędź to border-left , a prawa krawędź to border-right .
Składnia
P (obramowanie-góra: 2px jednolity szary;)
6. Zarys konspektu
Właściwość ustawia zewnętrzną granicę wokół elementów (tj. poza normalną granicą). Głównym celem tej właściwości jest wyróżnienie elementu. W przeciwieństwie do właściwości border, zastosowanie tej właściwości nie wpływa na rozmiar ani położenie elementu, ponieważ kontur jest renderowany na górze ramki elementu, co z kolei może powodować nakładanie się marginesów elementu i sąsiednich obszarów.
Również obrys zewnętrzny, w przeciwieństwie do granicy elementu, otacza element ze wszystkich stron, całkowicie go obramowując.
Zewnętrzny kontur jest zawsze prostokątny i nie podąża za obramowaniem prostokąta, który jest ustawiony na border-radius .
Właściwość konturu pozwala łączyć następujące właściwości: kolor konturu , styl konturu , szerokość konturu . Jeśli jakakolwiek wartość nie zostanie określona, jej miejsce zajmie wartość domyślna.
Div (szerokość: 100px; wysokość: 100px; kontur: #cacd58 solid 2px; )
6.1. Styl konturu w stylu konspektu
Wygląd linii obrysu zewnętrznego ustala się w taki sam sposób jak styl ramy elementu. Nie dziedziczone.
Składnia
P (styl konturowy: kalenica;)
6.2. Kolor konturu kolor konturu
Kolor konturu zewnętrznego można ustawić tylko wtedy, gdy ustawiony jest styl konturu. Nie dziedziczone.
Składnia
P ( styl konturu: grzbiet; kolor konturu: srebrny; )
6.3. Zewnętrzna szerokość konturu szerokość konturu
Grubość linii obrysu zewnętrznego ustala się tak samo jak grubość ramy elementu. Nie dziedziczone.
Składnia
P ( styl konturu: kropkowany; szerokość konturu: 5 pikseli; )
