Nieruchomość css – « granica”, pozwala ustawić grubość, kolor i rodzaj linii na obwodzie wokół elementu. Parametry tej właściwości można zapisać w jednym wierszu, oddzielone spacjami iw dowolnej kolejności.

• - grubość linii jeden piksel
• - linia ciągła
• - Biały kolor
• - czarny kolor
• - szary kolor

Solidna granica elementu

przerywana granica elementu

Kropkowane obramowanie elementu

Podwójna linia obramowania elementu

Własność poszczególnych odcinków granicy

Obniżona rama falista w objętości

Wypukła rama falista w objętości

Obniżona rama wolumetryczna

Wypukła rama wolumetryczna

Lekcje / CSS /

Lekcja 7

Prawie każda witryna używa właściwości, która tworzy obramowanie wokół elementu. Jest potrzebny zarówno do przycisków, jak i bloków z tekstem. Aby utworzyć obramowanie, element w CSS ma dwie właściwości: obramowanie i kontur. Rozważmy je.

granica

Ta właściwość jest potrzebna do ustawienia ramki wokół elementu, wskazuje jej granicę w dokumencie internetowym, szerokość ramki jest brana pod uwagę podczas pozycjonowania elementu. Posiada 3 wartości - kolor, grubość i rodzaj ramki.

Składnia właściwości border jest następująca:

obramowanie: Szerokość Typ Kolor;
Możesz również wybrać inną kolejność określania wartości właściwości, ale najważniejsza jest spacja.

Grubość (szerokość) ramki należy określić w pikselach (px) lub procentach (%).
Kolor można ustawić w Format RGB(Red Green Blue) lub w kodzie HTML HEX.

Poniżej są TYPY LINII z ich imionami:

Jak ustawić granice dla elementu? Robimy to w następujący sposób:

#blok(
obramowanie: 3px stałe #0085ss; /* ustaw linię na grubą na 3px niebieską */
}

Jeśli chcesz zainstalować jeden, dwa lub trzy rama z jednej strony, a następnie określ w następujący sposób:

górna granica- Górna ramka
obramowanie-dół- dolna rama
obramowanie lewe- ramka po lewej stronie;
granica-prawo- rama po prawej;

Blok (
obramowanie po prawej: 3 piksele stałe #0085cc;
obramowanie-dół: 2px przerywane #0085cc;
}

Jeśli chcesz usuń ramki element w CSS, a następnie napisz w obramowaniu właściwości - brak

pusty(
granica: brak /* element z pustą klasą nie będzie miał ramki */
}

zarys

Outline to właściwość potrzebna do ustawienia zewnętrznej granicy elementu.

Jest dwie różnice od granicy:
Po pierwsze, linia określona w obrysie NIE wpłynie na położenie samego bloku, jego szerokość i wysokość.
Po drugie, nie ma możliwości zamontowania ramy z pewnej strony.
Składnia jest taka sama jak border.

zarys: 2px z kropkami #0085cc; /* obramowanie 2 px kropkowane niebieskie */
Zarówno dla konturu, jak i dla obramowania możesz usunąć obramowanie, pisząc brak:

Dziękuję za uwagę!

Poprzedni artykuł
Lekcja 6

Granice elementów.

Dopełnienie i marginesy w CSS. Co to jest margines i dopełnienie? Następny artykuł
Lekcja 8. Jak ustawić kolor tekstu i tło elementu w CSS?

Komentarze do artykułu (vk.com)

granica

Obsługa przeglądarki

Opis

Właściwość CSS umożliwia jednoczesne ustawienie szerokości, stylu i koloru obramowania bloku. Granica bloku to prosta linia/ramka, która otacza blok ze wszystkich stron. Należy pamiętać, że dodając ramkę, wpłynie to na całkowity rozmiar bloku.

Wartości są oddzielone spacją i mogą być w dowolnej kolejności, przeglądarka określi, która z nich pasuje do pożądanego parametru. Nie jest konieczne określanie wszystkich trzech wartości, szerokość i/lub kolor można pominąć, w takim przypadku zamiast brakującej wartości zostanie użyta wartość ustawiona dla właściwości domyślnej, tj. jeśli na przykład nie określono szerokości, zostanie użyta wartość domyślna właściwości. Tabela pod składnią pokazuje wartości, których właściwości można użyć.

Uwaga: Aby ustawić obramowania tylko na niektórych stronach elementu, użyj następujących właściwości: border-top, border-bottom, border-left, border-right.

Wskazówka: Z reguły podczas korzystania z obramowania należy dodać dopełnienie.

Właściwość CSS: granica

Dodają odstęp między obramowaniem bloku a jego zawartością: tekstem, obrazami lub znacznikami podrzędnymi. Zwykle ramka jest wyświetlana blisko zawartości elementu, jest to przydatne tylko wtedy, gdy musisz ustawić ramkę wokół obrazu.

Składnia

border: border-width border-style kolor-obramowania|dziedzicz;

Wartości nieruchomości

Przykład

Tu jest jakiś tekst.

Wynik ten przykład w oknie przeglądarki:

Jak ustawić kolor, styl i rozmiar obramowania w polach.

W językach znaczników granica ( granica), mają tylko tabelki, obrazki i ramki, w niektórych przypadkach można ustawić kolor obramowania i tyle.

atrybut obramowania

Kaskadowe arkusze stylów dają nam więcej opcji, ale najpierw najważniejsze.

W CSS możemy kontrolować szerokość obramowania (granicy) za pomocą szerokość granicy, a dokładniej możemy kontrolować grubość każdej strony z osobna:
obramowanie-góra-szerokość- grubość górnej granicy
obramowanie-prawo-szerokość- grubość prawego krawężnika
obramowanie-dolna-szerokość- grubość dolnej granicy
granica-lewa-szerokość- grubość lewego obramowania
Ale można go również skrócić:
P (szerokość obramowania: górny prawy dolny lewy;)(górny prawy dolny lewy).
Szerokość obramowania można ustawić:
figury DIV(szerokość obramowania:5px), od zera do nieskończoności, tj. pozytywny.
cienki- cienkie obramowanie, DIV (szerokość obramowania: cienka)
średni- obramowanie środkowe, DIV (szerokość obramowania: średnia)
gruby- gruba ramka, DIV(szerokość-obramowania:gruba)
Z liczbami jasne, ale przy tych wartościach wszystko zależy od przeglądarki, ale jednak cienki<= medium <= thick .

Możemy również kontrolować kolor obramowania za pomocą kolor ramki a dokładniej kolor każdej strony:
kolor górnego obramowania górny kolor obramowania
obramowanie-prawo-kolor kolor prawej krawędzi;
kolor-dolny-obramowania kolor dolnej granicy;
kolor-lewy-obramowania kolor obramowania po lewej stronie.
Wartość koloru jest ustawiona jak dla kolor, tj. jeden z 16 kolorów: aqua, czarny, niebieski, fuksja, szary, zielony, limonkowy, bordowy, granatowy, oliwkowy, fioletowy, czerwony, srebrny, turkusowy, biały lub żółty, możesz także ustawić kolory: kolor:#000000, kolor:#AF0 , kolor:rgb(255,0,0) lub kolor:rgb(100%, 0%, 0%).
Bez względu na wybrany schemat kolorów, przeglądarki i tak go przetłumaczą kolor:rgb(255,0,0). Na przykład kolor:limonkowy = kolor:#00ff00 = kolor:#0F0 = kolor:rgb (0%, 100%, 0%), ale dla przeglądarki to nie ma znaczenia kolor:rgb (0,255,0), tj. obliczy tę wartość.

Jeśli grubość i kolor obramowania można również kontrolować za pomocą HTML, to styl ( styl obramowania) tylko CSS!!!
Styl może być kontrolowany przez każdą ze stron osobno:
w stylu obramowania-góra styl górnej granicy;
obramowanie-prawo-styl prawy styl obramowania;
styl obramowania na dole styl dolnej granicy;
styl obramowania po lewej styl obramowania po lewej stronie.
Rozważmy teraz wartości stylów:
1)styl obramowania: brak— Jest to wartość domyślna, podobna do border-width:0.
2)styl obramowania: ukryty- To samo, z wyjątkiem tabel (tabeli), które rozważymy później.
3)styl obramowania: kropkowany- Granica kropek.
4)styl obramowania: przerywany— Obramowanie z linii przerywanej.
5)styl obramowania: solidny- Obramowanie linii ciągłej, tj. jak w HTML.
6)styl obramowania: podwójny- Obramowanie podwójnej ciągłej linii, tutaj potrzebna jest grubość (szerokość obramowania) co najmniej 3 piksele.
7)styl obramowania: rowek- Krawędź wygląda, jakby została pocięta na płótno.
8)styl obramowania: kalenica— Krawędź wygląda, jakby wystawała z płótna.
9)styl obramowania: wstawka- Całe pudełko wygląda jak wciśnięte w płótno.
10)styl obramowania: początek- Przeciwieństwo poprzedniego.
Niektóre przeglądarki mogą ignorować wartości kropkowane, przerywane, podwójne, rowkowe, grzbietowe, wewnętrzne i początkowe i wyświetlać je jako pełne, tj. zwykła granica.

Wszystko to oczywiście prawda, ale wszystkie powyższe przykłady to tylko zasada działania, a nie mechanizm.
Właściwość reguły granica implikuje (border: size style color;), ta reguła jest wykonywana, jeśli wszystkie trzy wartości są obecne i tylko w tej kolejności, na przykład H1(obramowanie: 5px podwójne czerwone;), ale mogą być wyjątki, jeśli te wartości są dostarczane przez języki znaczników, na przykład dla tabeli TABELA(obramowanie: 2px), tj. podana jest tylko jedna wartość.

Aby zarządzać nie całym krawężnikiem, ale każdą częścią z osobna, obowiązują zasady:
(góra obramowania: kolor stylu rozmiaru;) Kontrola górnego krawężnika;
(obramowanie po prawej: kolor stylu rozmiaru;) Kontrola krawężnika po prawej;
(border-bottom: rozmiar styl kolor;) Kontrola dolnego krawężnika;
(obramowanie po lewej: kolor stylu rozmiaru ;) Kontrola krawężnika po lewej stronie.
Reguły te mogą być stosowane pojedynczo lub wszystkie razem.

Wyjątkiem jest ta zasada:
H1(
obramowanie: 4px stałe zielone;
}
Chodzi o to, że w CSS ostatnia reguła ma najwyższy priorytet, w tym przypadku właściwość border zawiera border-left i dlatego reguła border-left zostanie zignorowana, dokładnie tak:
H1(
obramowanie: 4px stałe zielone;
obramowanie po lewej: 2px podwójne czerwone;
}
Najpierw ustalamy zasady dla całego krawężnika, a następnie dla poszczególnych odcinków.

Mam wszystko o obramowaniach elementów, z wyjątkiem tego, że rozważymy niektóre właściwości, gdy dojdziemy do tabel i innych wyjątków.

css: granica. Granice elementów.

Granice CSS3

Granice CSS3

Dzięki CSS3 możesz tworzyć zaokrąglone obramowania, dodawać cienie do kontenerów i używać obrazu jako obramowania — wszystko to bez używania programu do projektowania, takiego jak Photoshop.

W tej lekcji poznasz następujące właściwości obramowania:

• promień-granicy
• cień pudełka
• obramowanie obrazu

Obsługa przeglądarki

Internet Explorer 9 obsługuje niektóre z nowych właściwości granic.

Firefox wymaga prefiksu -moz- dla border-image.

Chrome i Safari wymagają prefiksu -webkit- dla border-image.

Opera wymaga -o- dla obrazu granicznego.

Safari wymaga również prefiksu -webkit- dla box-shadow.

Opera obsługuje nowe właściwości granic.

Zaokrąglone rogi CSS3

Dodawanie zaokrąglonych rogów w CSS2 było trudne. Musieliśmy użyć różnych obrazów w każdym rogu.

W CSS3 tworzenie zaokrąglonych rogów jest łatwe.

W CSS3 właściwość border-radius służy do tworzenia zaokrąglonych narożników:

Ten blok ma zaokrąglone rogi!

Cień kontenera CSS3

W CSS3 właściwość box-shadow służy do dodawania cienia do pól:

CSS3 Border-Obraz

Dzięki właściwości CSS3 border-image możesz użyć obrazu do utworzenia ramki:

Własność border-image umożliwia określenie obramowania obrazu!

Oryginalny obraz użyty do stworzenia ramki należy do Ciebie:

Nowe właściwości obramowania

atrybut obramowania

atrybut obramowania, tag

Obramowania HTML

Dopuszczalne jest użycie obramowania bez wartości, wówczas grubość obramowania będzie równa jednemu pikselowi. Domyślnie ramka jest wyświetlana z efektami 3D, ale jeśli dodatkowo zastosujesz atrybut tła, ramka stanie się „płaska”.

Ponadto, jeśli atrybut border ma wartość niezerową, przeglądarki również pokazują cienkie ramki wokół samych komórek. Wyświetlanie tych granic można kontrolować za pomocą atrybutu rules.

Wartości

Wartością atrybutu może być dowolna nieujemna liczba określająca rozmiar w pikselach.

Wartość domyślna: 0.

Składnia

Wymagany atrybut: brak.

Przykład HTML: zastosowanie atrybutu obramowania

Przykładowy wynik

Wynik. Stosowanie atrybutu granicy.

Michał 2016-06-11 1 HTML i CSS 0

Jak zrobić podwójną ramkę w css?

Cześć wszystkim. Czy wiesz, jak zrobić podwójną ramkę w css? Jeśli nie, przeczytaj tę krótką notatkę. Chodzi o to, że nie możesz tego zrobić ze zwykłą ramką, musisz iść w drugą stronę.

Jeśli ustawisz granicę z właściwością border, możesz ustawić tylko jedną. Ale bardzo często projekt może wymagać kilku ramek. W takim przypadku powinieneś użyć pseudo-ramki - cienia.

Podwójna ramka z box-shadow

Ogólnie rzecz biorąc, jeśli chcesz bardziej szczegółowo przestudiować cień w css, radzę przeczytać odpowiedni temat. W tym artykule nie będę szczegółowo wyjaśniał składni właściwości, ale po prostu pokażę, jak utworzyć podwójną ramkę. Stworzę więc zwykły blok, do którego przepiszę kilka stylów. Blok może być dowolny i o dowolnej treści. W moim przypadku jest to prosty div, więc nie pokażę nawet kodu html. A oto style:

Dział(
tło: #E0D8A3;
szerokość: 180px
wysokość: 110px;
wypełnienie: 12px
}

Cóż, typowy przykład konstrukcji blokowej.
Teraz stwórzmy podwójną ramkę, używając wielu cieni. Do stylów blokowych dodam następującą właściwość:

Cień pudełka: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

Tak to wygląda:

Jak widać, wyszło całkiem nieźle. W box-shadow jest tylko 5 parametrów. Pierwszy to poziome przesunięcie cienia, drugi to pionowe przesunięcie. Trzeci i czwarty parametr to rozmycie i rozciągnięcie. Jak widać, pierwszych trzech w ogóle nie dotykamy. Nie potrzebujemy rozmycia, ponieważ potrzebujemy ostrego cienia. Jak widać, przepisałem czwarty parametr - rozciąganie. Określa, jak bardzo cień będzie większy niż element, do którego jest przymocowany.

Domyślnie wszystko wygląda tak - cień jest tego samego rozmiaru co element i wyraźnie leży pod nim. Jeśli zmienisz rozciągnięcie, cień zacznie wystawać poza element. W ten sposób możesz tworzyć granice, dokładnie tak samo jak właściwość border. Cóż, z piątym parametrem myślę, że wszystko jest jasne - to kolor cienia.

Jak widać, po prostu wymieniłem parametry dla każdego nowego cienia, oddzielone przecinkami. Myślę, że już zgadłeś, że w ten sam sposób możesz stworzyć potrójną ramkę itp. Tutaj nie ma żadnych ograniczeń. Właściwie jak dla mnie sprawa jest zamknięta, a jeśli masz jakieś pytania, możesz je napisać w komentarzach.

Minuta twojej uwagi: Wszyscy chcemy umieszczać nasze witryny na niezawodnym hostingu. Przeanalizowałem setki hostów i znalazłem najlepszy - HostIQ W sieci są setki pozytywnych recenzji, średnia ocena użytkowników to 4,8 na 5. Niech Twoje strony będą dobre.

Opis

Właściwość uniwersalna border pozwala na jednoczesne ustawienie szerokości, stylu i koloru obramowania wokół elementu. Wartości mogą iść w dowolnej kolejności, oddzielone spacją, przeglądarka określi, która z nich odpowiada pożądanej właściwości. Aby ustawić obramowanie tylko po niektórych stronach elementu, użyj właściwości border-top , border-bottom , border-left , border-right .

Składnia

Wartości

Wartość border-width określa szerokość granicy. Dostępnych jest kilka wartości stylu obramowania, aby kontrolować jego wygląd. Ich nazwy i wynik akcji pokazano na ryc. jeden.

Rys.1. Style ramek

border-color ustawia kolor obramowania, wartość może być w dowolnym poprawnym formacie CSS.

dziedziczy dziedziczy wartość rodzica.

HTML5 CSS2.1 IE Cr Op Sa Fx

W tym przykładzie wokół warstwy dodawane jest podwójne obramowanie. Wynik pokazano na ryc. 2.

Ryż. 2. Stosowanie własności granicznej

Model obiektowy

document.getElementById("identyfikator elementu ").style.border

Przeglądarki

Internet Explorer do wersji 6 włącznie renderuje kropkowane jako przerywane z szerokością obramowania 1px. Przy 2 pikselach i powyżej kropkowana wartość działa poprawnie. Ten błąd został naprawiony w IE7, ale tylko dla wszystkich granic 1px. Jeśli jedna z krawędzi pola ma 2 piks. lub jest grubsza, to kropka staje się przerywana w IE7.

Internet Explorer do wersji 7.0 nie obsługuje wartości dziedziczenia.

Styl obramowania może się nieznacznie różnić w zależności od przeglądarki w przypadku korzystania z wartości rowek , grzbiet , wstawka lub początek .

Opis

Właściwość uniwersalna border pozwala na jednoczesne ustawienie szerokości, stylu i koloru obramowania wokół elementu. Wartości mogą iść w dowolnej kolejności, oddzielone spacją, przeglądarka określi, która z nich odpowiada pożądanej właściwości. Aby ustawić obramowanie tylko po niektórych stronach elementu, użyj właściwości border-top , border-bottom , border-left , border-right .

Składnia

Wartości

Wartość border-width określa szerokość granicy. Dostępnych jest kilka wartości stylu obramowania, aby kontrolować jego wygląd. Ich nazwy i wynik akcji pokazano na ryc. jeden.

Rys.1. Style ramek

border-color ustawia kolor obramowania, wartość może być w dowolnym poprawnym formacie CSS.

dziedziczy dziedziczy wartość rodzica.

HTML5 CSS2.1 IE Cr Op Sa Fx

W tym przykładzie wokół warstwy dodawane jest podwójne obramowanie. Wynik pokazano na ryc. 2.

Ryż. 2. Stosowanie własności granicznej

Model obiektowy

document.getElementById("identyfikator elementu ").style.border

Przeglądarki

Internet Explorer do wersji 6 włącznie renderuje kropkowane jako przerywane z szerokością obramowania 1px. Przy 2 pikselach i powyżej kropkowana wartość działa poprawnie. Ten błąd został naprawiony w IE7, ale tylko dla wszystkich granic 1px. Jeśli jedna z krawędzi pola ma 2 piks. lub jest grubsza, to kropka staje się przerywana w IE7.

Internet Explorer do wersji 7.0 nie obsługuje wartości dziedziczenia.

Styl obramowania może się nieznacznie różnić w zależności od przeglądarki w przypadku korzystania z wartości rowek , grzbiet , wstawka lub początek .

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.

Rozważ użycie CSS do stworzenia takiego kształtu:

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:

1. none - brak obramowania (domyślnie).
2. solidna - solidna granica.
3. podwójne - podwójne obramowanie.
4. przerywana - przerywana granica.
5. dotted - obramowanie składające się z serii kropek.
6. grzbiet - granica „grzbietu”.
7. rowek - granica „rowek”.
8. wstawka - obramowanie wstawki.
9. początek - obramowanie ekstrudowane.

Przykłady tego, jak wyglądają.

bez obramowania (brak)

pełne 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 grzbietu 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 (pełne podwójne) – 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ść po jednej stronie zgodnie z ruchem wskazówek zegara, zaczynając 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 nazw kolorów znajduje się 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 bloku. 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:

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ść została wprowadzona w CSS3 i działa poprawnie we wszystkich nowoczesnych przeglądarkach z wyjątkiem Internet Explorera 8 (i starszych wersji).

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 do zaokrąglania każdego pojedynczego narożnika 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.

Uważnie przeglądając tę ​​tabelę, 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;