Okviri i obrube. Dvostruki obrub pomoću CSS-a

Vlad Merzhevich

Uz CSS, možete dodati obrub elementu na nekoliko načina. U osnovi, naravno, svojstvo granice koristi se kao najuniverzalnije, kao i obris i, iznenađujuće, kutijasta sjena, čiji je glavni zadatak stvoriti sjenu. Zatim ćemo razmotriti ove metode i njihove razlike među sobom.

Svojstvo obrisa

Najjednostavnije svojstvo za stvaranje okvira. Ima iste parametre kao i granica, ali se značajno razlikuje od nje u nekim detaljima:

• oko elementa se crta obris (obrub je iznutra);
• obris ne utječe na dimenzije elementa (obrub se dodaje širini i visini elementa);
• obris se može postaviti samo oko cijelog elementa, ne na pojedinačnim stranama (obrub se može koristiti na bilo kojoj strani ili odjednom);
• na obris ne utječe radijus zaokruživanja koji je postavljen svojstvom border-radius (na obrub utječe).

Postavlja se pitanje - u kojim slučajevima je potreban obris, kada njegovu ulogu, unatoč navedenim razlikama, u potpunosti preuzima granica? Nema toliko situacija, ali se događaju:

• stvaranje složenih raznobojnih okvira;
• dodavanje obruba elementu kada zadržite pokazivač miša iznad njega;
• skrivanje okvira koji je automatski dodao preglednik za neke elemente kada dobiju fokus;
• za obris, možete postaviti udaljenost od ruba elementa do okvira pomoću svojstva outline-offset za stvaranje.

Raznobojni okviri

Treba shvatiti da obris ni na koji način ne zamjenjuje obrub i može postojati s njim, kao što je prikazano u primjeru 1.

Primjer 1. Izrada okvira

U ovom primjeru, oko elementa je dodan crni obrub, koji je od pozadine odvojen bijelim obrubom (slika 1).

Riža. 1. Okvir oko elementa

Okvir pri korištenju: lebdjeti

Dodavanje obruba kroz obrub povećava širinu elementa, što je prilično primjetno kada se kombinira obrub i pseudoklasa: hover. Postoje dva načina kako ovo "pobijediti". Najjednostavnije je zamijeniti obrub obrisom, za koji znamo da nema utjecaja na dimenzije elementa (primjer 2).

Primjer 2. Granica pri lebdenju

obris nije uvijek prikladan, makar samo zato što zaokruživanje kutova ne utječe na njega. Ovdje je prikladna druga metoda - dodajte nevidljivi okvir ili okvir koji odgovara boji pozadine, a zatim promijenite njegove parametre pri lebdenju (primjer 3). Tada neće doći do pomaka elementa, budući da okvir već postoji od početka. Ali uvijek zapamtite da je širina elementa zbroj vrijednosti širine, obruba s lijeve strane i obruba s desne strane. Slična je situacija i s visinom.

Primjer 3. Okvir pri lebdenju

Obrub oko polja obrasca

U nekim preglednicima (Chrome, Safari, najnovije verzije Opera) mali obrub u boji pojavljuje se oko polja obrasca kada dobiju fokus (slika 2). Da biste ga uklonili, samo dodajte vrijednost none svojstvu obrisa u stilovima, kao što je prikazano u primjeru 4.

Riža. 2. Okvir oko polja

Primjer 4. Uklanjanje okvira

Okviri putem box-shadow

Iako je svojstvo box-shadow namijenjeno dodavanju sjene oko elementa, može se koristiti i za stvaranje obruba što se ne može učiniti s obrubom ili obrisom. To je zbog činjenice da broj sjena može biti neograničen, čiji su parametri navedeni odvojeni zarezima.

Da biste dobili okvir, prva tri parametra treba postaviti na nulu, oni su odgovorni za položaj sjene i njegovu zamućenost. Četvrti parametar u ovom slučaju odgovoran je za debljinu obruba, a peti postavlja boju obruba. Za drugi okvir, četvrti parametar je zbroj debljina dvaju okvira.

Primjer 4 pokazuje kako dodati dva obruba i jedan obrub desno koristeći jedno svojstvo sjene okvira.

Primjer 4. Korištenje box-shadow

Rezultat ovog primjera prikazan je na sl. 3.

Riža. 3. Okviri stvoreni svojstvom box-shadow

Pseudonimi svojstva CSS granice za stvaranje obruba objekta, odnosno debljine obruba, njegove boje i stila. Ovo svojstvo se široko koristi u HTML-u. Možete stvoriti različite efekte kako biste bolje percipirali sadržaj na stranici. Na primjer, dizajnirajte bočnu traku, zaglavlje stranice, izbornik itd.

1. CSS granična sintaksa

granica: širina obruba u stilu obruba boja | naslijediti;

• border-width - debljina granice. Možete ga postaviti u pikselima (px) ili koristiti standardne vrijednosti tanko, srednje, debelo (razlikuju se samo po širini u pikselima)
• border-style - stil prikazanog obruba. Može poprimiti sljedeće vrijednosti
  • ništa ili skriveno - poništava granicu
  • točkasti - točkasti okvir
  • isprekidani - dash okvir
  • čvrsta - jednostavna linija (najčešće se koristi)
  • dvostruki - dvostruki obrub
  • utor - 3D žljebljeni rub
  • greben, umetak, početak - razni efekti 3D okvira
  • naslijediti - primjenjuje se vrijednost roditeljskog elementa
• border-color - boja obruba. Može se postaviti pomoću određenog naziva boje ili u RGB formatu (pogledajte nazive html boja za stranicu)

Bilješka

Vrijednosti u svojstvu CSS granice mogu se navesti bilo kojim redoslijedom. Najčešće korišteni slijed je "boja stila debljine".

2. Primjeri s različitim CSS granicama

2.1. Primjer. Različiti stilovi obruba u stilu obruba

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как оформлять текст в CSS. В данной статье я бы хотел рассказать, что такое рамки в CSS и как их использовать. Правила, отвечающие за рамку состоят из трех элементов: толщина рамки, стиль и цвет. Давайте создадим файл index.html со следующим содержимым:

На этой же странице зададим стили для блока с id = tester (внутри заголовка страницы добавим следующие строки):

Svojstvo border-width kontrolira širinu obruba, svojstvo border-style kontrolira stil obruba, a border-color kontrolira boju obruba. S prvim i trećim svojstvom sve je jasno. Sve vrijednosti koje svojstvo obrubnog stila može uzeti prikazane su na donjoj slici:

Ako sada otvorimo našu stranicu u pregledniku, vidjet ćemo da se oko bloka pojavio čvrsti crveni obrub od 1px.

Ovo sam vam pokazao dugački unos CSS okvira (ovaj unos je vrlo glomazan i obično ga nitko ne koristi). Sve upute mogu stati u jednu liniju. U našem slučaju to će izgledati ovako:

Obrub: 1px puna crvena;

Oni. prvo odredimo debljinu okvira, zatim odredimo stil i boju okvira.

Vjerojatno ste primijetili da se okvir pojavio na sve četiri strane. Okviri se mogu postaviti za bilo koju stranu zasebno (to će biti jasno na konkretnom primjeru):

Bord-top: 2px puna crvena; obrub-dno: 3px točkasto zeleno; obrub-lijevo: 6px isprekidano žuto; border-right: 5px dvostruko # fe54e5;

Možete vidjeti da sve 4 strane imaju različite okvire. Ako ne postavite okvir za neku stranu, onda, sukladno tome, okvira neće biti.

Okviri se koriste apsolutno posvuda: gotovo je teško pronaći dizajn web stranice koji ne koristi okvire. Vrlo često su stavke izbornika odvojene okomitom crtom, koja je postavljena samo svojstvom border-right ili border-left. Također možete napraviti zanimljive efekte na poveznicama. Domaća zadaća na ovu temu:

Morate kreirati stranicu i postaviti 2 linka na nju. Stil ovih veza je puna linija; pri lebdenju ova linija bi trebala postati isprekidana.

Također je vrlo dobro koristiti obrube na elementima prilikom postavljanja stranice kako biste bolje razumjeli gdje se koji element nalazi. Barem mi je mnogo jasnije i razumljivije pisati.

Ovo svojstvo stvara obrub oko elementa. Više o ovoj nekretnini možete pročitati ovdje, a u ovom članku ću općenito opisati kako funkcionira. Ove informacije će biti dovoljne za razumijevanje kako stvoriti obrube pomoću CSS-a.

Sintaksa za svojstvo obruba je jednostavna: granica: 1px puna crna; ... Ovo svojstvo ima tri značenja:

• 1px - debljina obruba.
• puna je vrsta granice, puna je puna linija, dvostruka je dvostruka puna linija, isprekidana je isprekidana linija. Postoji još nekoliko vrsta obruba, informacije o njima možete pronaći ovdje: CSS granica.
• crna - postavlja boju obruba. Boje se mogu odrediti imenom, važeće vrijednosti se nalaze ovdje: CSS tablica boja ili heksadecimalnim kodom. Kako to učiniti piše u članku: Boje u CSS-u.

CSS okvir teksta

Evo primjera korištenja svojstva granice za stvaranje obruba širine jedan piksel i crne boje:

Ovom paragrafu je dodijeljen razred primjer-1.

U ovom primjeru također smo koristili svojstvo CSS padding ili padding. Ovo svojstvo postavlja veličinu uvlake od teksta do poteza (granica elementa).

Pogledajmo još jedan jednostavan primjer samo kako bismo shvatili materijal. Napravite obrub širine tri piksela u crvenoj boji i bez dopuna (CSS svojstvo paddinga).

Ovom paragrafu je dodijeljen razred primjer-2.

Kao što vidimo, bez paddinga, okvir teksta izgleda napaljeno.

Kako uokviriti sliku u CSS-u

Okviri za slike postavljaju se na sličan način pomoću svojstva obruba. Napravimo zeleni obrub od 4px za sliku.

Primjer-img (rub: 4px čvrsto zeleno;)

Ovako bi ovaj kod funkcionirao:

Kako zaokružiti kutove obruba u CSS-u

Zaokruživanje uglova obruba u CSS-u se vrši pomoću svojstva border-radius. Ovo svojstvo je predstavljeno u CSS3 i radi u svim modernim preglednicima.

Svojstvo radijusa granice može imati jednu do četiri vrijednosti. Ako je vrijednost jedan, tada se postavlja stupanj zaokruživanja za sve kutove. Navedimo primjer kako bi ovo svojstvo jedne vrijednosti funkcioniralo.

Primjer-3 (obrub: 1px puna crna; radijus obruba: 15px; padding: 10px;)

Ovako radi:

Svojstvo radijusa granice: 15px.>

Ako blok nema obrub, tada postoji granica granice širine: 0; , tada će područje ispunjeno bojom pozadine biti zaokruženo (svojstvo background-color). Evo primjera:

Primjer-4 (širina-bordera: 0; // iako je ova vrijednost 0 prema zadanim pozadinskim bojama: #DDD; radijus granice: 15px; padding: 10px;)

Ovako radi ovaj primjer:

Svojstvo radijusa granice: 15px.>

Kao što sam ranije napisao, svojstvo radijusa granice može se postaviti od jedne do četiri vrijednosti. Tablica u nastavku opisuje kako će svaka kombinacija vrijednosti funkcionirati.

Za svojstvo radijusa granice, vrijednosti se mogu navesti u postocima.

Nacrtajmo krug u CSS-u. Da biste to učinili, uzmite kvadratni blok od 100 x 100 piksela i zaokružite kutove pomoću CSS-a koristeći pravilo radijusa granice: 50%.

Primjer-5 (širina: 100px; visina: 100px; boja pozadine: # F00; radijus obruba: 50%;)

Ovako radi ovaj primjer:

Ovo pokriva cijelu temu "okviri u CSS-u". Sretno u učenju CSS-a!

Generičko svojstvo granice koristi se za kontrolu granice elementa. Ovo svojstvo omogućuje postavljanje širine, stila i boje obruba elementa u jednoj deklaraciji.

Ova tri svojstva (debljina, stil i boja obruba) mogu se postaviti u jednoj deklaraciji. Evo primjera:

Stil obruba možete odrediti samo na jednoj strani elementa. Da biste to učinili, koristite svojstva border-top (gornji obrub), border-right (desni rub), border-bottom (donji rub), border-left (lijevi rub).

U ovom primjeru, svaka strana okvira ima različitu debljinu obruba, stil i boju.

Razmislite kako možete stvoriti ovakav oblik pomoću CSS-a:

Vrijednosti obruba - debljina, stil i boja - mogu se zasebno postaviti pomoću posebnih svojstava.

• border-style - stil obruba.
• border-width - širina obruba.
• border-color - boja obruba.

Razmotrimo svaku od vrijednosti zasebno.

Nekretnina u stilu granice. Border stil.

Svojstvo border-style postavlja stil obruba. U CSS-u, za razliku od HTML-a, granica elementa može biti više od pukog. Važeće vrijednosti za stil obruba su:

1. nema - nema granice (zadano).
2. čvrsta - čvrsta granica.
3. dvostruki - dvostruki obrub.
4. isprekidana - isprekidana granica.
5. točkasto - obrub sastavljen od niza točaka.
6. greben - greben granica.
7. žlijeb - granica žlijeba.
8. umetak - uvučena granica.
9. početak - ekstrudirana granica.

Primjeri kako izgledaju.

bez granice (nema)

čvrsta granica

dvostruka granica

točkasta granica

isprekidana granica

granica utora

granica grebena

umetnuti obrub

na početku

Usput, ako boju obruba postavite na crnu za okvir grebena, dobit ćete sljedeći rezultat.

Div s crnim rubom i stilom grebena.

Obrub izgleda čvrsto, ali to je zato što se stil grebena stvara dodavanjem efekta crne sjene, a crni efekt na crnom rubu nije vidljiv.

Koristeći svojstvo border-style, stil obruba može se postaviti za više od samo svih strana bloka. Moguće je postaviti nekoliko vrijednosti za jedno svojstvo stila obruba, ovisno o broju vrijednosti, stil obruba će biti dodijeljen različitom broju strana bloka. Možete postaviti jednu, dvije, tri i četiri vrijednosti. Pogledajmo primjere za svaki slučaj.

Jedna vrijednost (puna) - stil obruba je postavljen za sve strane bloka.

Dvije vrijednosti (puna dvostruka) - prva vrijednost postavlja stil za gornju i donju stranu, druga za bočnu.

Tri vrijednosti (puna dvostruka točka) - prva vrijednost za gornju stranu, druga za stranu, treća za donju.

Četiri vrijednosti (puna dvostruka isprekidana točka) - svaka vrijednost za jednu stranu u smjeru kazaljke na satu počevši od vrha.

Svojstvo širine granice. Debljina obruba.

Svojstvo border-width koristi se za postavljanje debljine obruba elementa. Debljina obruba može se odrediti u bilo kojoj apsolutnoj mjernoj jedinici, kao što su pikseli.

Kao i kod svojstva obrubnog stila, svojstvo se također može postaviti na jednu do četiri vrijednosti. Pogledajmo primjere za svaki slučaj.

Primjer koda:

Postoje i vrijednosti ključnih riječi za svojstvo granice širine. tri su od njih:

• tanka - tanka granica;
• srednja - srednja debljina;
• debela - debela granica;

Debljina obruba: tanka.

Debljina ruba: srednja.

Debljina obruba: debela.

Svojstvo boje granice. Boja obruba.

Mogućnost boje obruba koristi se za kontrolu boje obruba. Boje za ovo svojstvo mogu se postaviti bilo kojom metodom opisanom u članku "Boje u CSS-u", odnosno:

• Heksadecimalni zapis (# ff00aa) boje.
• RGB format - rgb (255,12,110). RGBA format za CSS3.
• HSL i HSLA formati za CSS3.
• Naziv boje, kao što je crna. Za potpuni popis naziva boja pogledajte tablicu CSS naziva boja.

Svojstvo boje granice također može imati jednu do četiri vrijednosti i obrađuje ih na isti način kao i prethodna svojstva.

Jedna vrijednost (crvena).

Dvije vrijednosti (crveno crna).

Tri značenja (crveno crno žuto).

Četiri značenja (crveno crno žuto plavo).

Vratimo se sada na gore opisani problem i nacrtajmo oblik:

Evo koda koji crta takav oblik, samo veće veličine:

Zasebno postavljanje vrijednosti za strane

Kao što je gore spomenuto, možete odrediti vrijednosti svojstva granice samo za jednu stranu bloka. Za ove namjene postoje svojstva:

• obrub-vrh (gornji obrub)
• granica desno (desna granica)
• granica-dno (donja granica)
• granica-lijevo (lijeva granica)

Podsjetim vas da sva svojstva imaju tri vrijednosti (debljina, stil i boja) bilo kojim redoslijedom. Ali postoje svojstva koja vam omogućuju da postavite debljinu, boju i stil za svaku stranu zasebno. Pisanje ovih svojstava proizlazi iz gore navedenog.

Opcije gornjeg obruba (border-top).

• border-top-color - Postavlja boju gornjeg ruba elementa.
• border-top-width - Postavlja debljinu gornjeg ruba elementa.
• border-top-style - Postavlja stil gornjeg ruba elementa.

Opcije desnog ruba (border-desno).

• border-right-color - Postavlja boju desnog ruba elementa.
• border-right-width - Postavlja širinu desnog ruba elementa.
• border-right-style - Postavlja stil desnog ruba elementa.

Parametri dna (bord-bottom).

• border-bottom-color - postavlja boju donjeg ruba elementa.
• border-bottom-width - Postavlja širinu donjeg ruba elementa.
• border-bottom-style - Postavlja stil donjeg ruba elementa.

Opcije lijevog obruba (border-lijevo).

• border-left-color - Postavlja boju lijevog ruba elementa.
• border-left-width - Postavlja širinu lijevog ruba elementa.
• border-left-style - Postavlja stil lijevog ruba elementa.

Primjer korištenja ovih svojstava:

Svojstvo radijusa granice. Zaokruživanje uglova granice.

Svojstvo border-radius služi za zaokruživanje uglova granica elementa. Ovo svojstvo uvedeno je u CSS3 i ispravno radi u svim modernim preglednicima osim Internet Explorera 8 (i starijih).

Vrijednosti mogu biti bilo koji broj koji se koristi u CSS-u.

Svojstvo radijusa granice je 15px.

Ako okvir bloka nije naveden, tada se događa zaokruživanje s pozadinom. Evo primjera zaokruživanja okvira bez obruba, ali s bojom pozadine:

Svojstvo radijusa granice je 15px.

Postoje svojstva za zaokruživanje svakog kuta elementa pojedinačno. Ovaj primjer koristi sve njih:

Obrub-gore-lijevo-radijus: 15px; granica-gore-desno-radijus: 0; border-bottom-right-radius: 15px; granica-dolje-lijevo-radijus: 0;

Svojstvo radijusa granice je 15px.

Iako se ovaj kod može napisati u jednoj deklaraciji: border-radius: 15px 0 15px 0. Poanta je da se svojstvo radijusa granice može postaviti od jedne do četiri vrijednosti. U tablici u nastavku navedena su pravila koja uređuju takve oglase.

Nakon što ste pažljivo proučili ovu tablicu, možete shvatiti da će najkraći zapis potrebnog stila biti ovakav: border-radius: 15px 0. Postoje samo dvije vrijednosti.

Malo prakse

Kako nacrtati limun pomoću CSS-a.

Evo koda za takav blok:

Margina: 0 auto; / * Postavite blok u središte * / širina: 200px; visina: 200px; pozadina: # F5F240; obrub: 1px čvrsta # F0D900; radijus granice: 10px 150px 30px 150px;

Već smo nacrtali oblik:

Sada ostavimo trokut iz njega:

Kod trokuta je ovakav:

Margina: 0 auto; / * Postavite blok u središte * / padding: 0px; širina: 0px; visina: 0; obrub: 30px puna bijela; obrub-dno-boja: crvena;