Okviri i granice. Dvostruki obrub korištenjem CSS-a

Vlad Merzhevich

Koristeći CSS, možete dodati granicu elementu na nekoliko načina. U osnovi, naravno, koristi se svojstvo granice, kao najuniverzalnije, kao i obris i, iznenađujuće, box-shadow , čiji je glavni zadatak stvaranje sjene. Zatim ćemo razmotriti ove metode i njihove razlike među sobom.

outline property

Najjednostavnije svojstvo za kreiranje okvira. Ima iste parametre kao i border, ali se značajno razlikuje u nekim detaljima:

• obris se prikazuje oko elementa (ivica unutra);
• kontura ne utiče na dimenzije elementa (ivica se dodaje širini i visini elementa);
• obris se može postaviti samo oko cijelog elementa, ali ne i na pojedinačnim stranama (obrub se može koristiti za bilo koju stranu ili sve odjednom);
• na konturu ne utječe radijus fileta koji je specificiran svojstvom border-radius (na ivicu utiče).

Postavlja se pitanje - u kojim slučajevima je potreban obris, kada njegovu ulogu, uprkos nabrojanim razlikama, u potpunosti preuzima granica? Nema mnogo situacija, ali se dešavaju:

• stvaranje složenih raznobojnih okvira;
• dodavanje okvira elementu kada pređete mišem preko njega;
• sakrivanje granice koju pretraživač automatski dodaje nekim elementima prilikom primanja fokusa;
• za outline, možete postaviti udaljenost od ruba elementa do okvira koristeći svojstvo outline-offset, da biste kreirali .

Raznobojni okviri

Morate shvatiti da obris ni na koji način ne zamjenjuje granicu i može lako postojati zajedno s njom, kao što je prikazano u primjeru 1.

Primjer 1: Kreiranje okvira

U ovom primjeru, oko elementa je dodat crni okvir, koji je od pozadine odvojen bijelim okvirom (slika 1).

Rice. 1. Okvir oko elementa

Okvir kada koristite:hover

Prilikom dodavanja okvira preko ivice širina elementa se povećava, što je prilično uočljivo kada se kombinuju ivica i pseudoklasa :hover. Postoje dva načina da ovo “pobijedite”. Najjednostavnije je zamijeniti border sa outline, što, kao što znamo, ne utiče na veličinu elementa (primjer 2).

Primjer 2: Okvir pri lebdenju

obris nije uvijek prikladan, makar samo zato što zaokruživanje uglova ne utiče na njega. Ovdje je prikladna druga metoda - dodajte nevidljivi okvir ili okvir koji odgovara boji pozadine, a zatim promijenite njegove parametre kada lebdite (primjer 3). Tada neće doći do pomaka elementa, jer okvir u početku već postoji. Ali uvijek se sjećamo da je širina elementa zbir vrijednosti širine, granice s lijeve strane i granice s desne strane. Slična je situacija i sa visinom.

Primjer 3: Okvir na lebdenju

Ivica oko polja obrasca

U nekim pretraživačima (Chrome, Safari, najnovije verzije Opera), mali okvir u boji se prikazuje oko polja obrasca kada dobiju fokus (slika 2). Da biste ga uklonili, samo dodajte vrijednost none svojstvu outline u stilovima, kao što je prikazano u primjeru 4.

Rice. 2. Okvir oko margina

Primjer 4. Uklanjanje okvira

Okviri preko box-shadow

Iako je svojstvo box-shadow namijenjeno za dodavanje sjene oko elementa, može se koristiti i za kreiranje granica koje se ne mogu kreirati korištenjem border ili outline. To je sve zahvaljujući činjenici da broj sjenki 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 njeno zamućenje. Četvrti parametar u ovom slučaju je odgovoran za debljinu ivice, a peti postavlja boju ivice. Za drugi okvir, četvrti parametar je jednak zbiru debljina dva okvira.

Primjer 4 pokazuje kako dodati dva okvira i jednu ivicu desno koristeći jedno svojstvo sjene okvira.

Primjer 4: Korištenje box-shadow

Rezultat ovog primjera prikazan je na sl. 3.

Rice. 3. Okviri kreirani svojstvom box-shadow

Svojstvo CSS granice koristi se za kreiranje ivice objekta, odnosno debljine ivice, njene boje i stila. Ovo svojstvo se široko koristi u HTML-u. Možete kreirati različite efekte kako biste bolje percipirali sadržaj na stranici. Na primjer, dizajnirajte bočnu traku, zaglavlje web stranice, meni itd.

1. CSS granična sintaksa

granica : granica-širina border-style boja granice | nasljediti;

• border-width - debljina granice. Možete ga postaviti u pikselima (px) ili koristiti standardne vrijednosti tanak, srednji, debeli (razlikuju se samo po širini u pikselima)
• border-style - stil prikazane ivice. Može uzeti sljedeće vrijednosti
  • ništa ili skriveno - poništava granicu
  • tačkasti - tačkasti okvir
  • isprekidani - okvir od crtica
  • puna - jednostavna linija (najčešće korištena)
  • duplo - dupli okvir
  • groove - žljebljena 3D ivica
  • greben, umetak, početak - razni efekti 3D okvira
  • naslijediti - vrijednost roditeljskog elementa se primjenjuje
• border-color - boja granice. Može se navesti korištenjem određenog naziva boje ili u RGB formatu (pogledajte html nazive boja za stranicu)

Bilješka

Vrijednosti u svojstvu CSS granica mogu se postaviti bilo kojim redoslijedom. Najčešće korištena sekvenca je „boja u stilu debljine“.

2. Primjeri s različitim CSS granicama

2.1. Primjer. Različiti stilovi dizajna 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 je odgovorno za širinu ivice, svojstvo border-style je odgovorno za stil ivice, a svojstvo border-color je odgovorno za boju ivice. Sa prvim i trećim svojstvima je sve jasno. Sve vrijednosti koje svojstvo u stilu granice može uzeti prikazane su na donjoj slici:

Ako sada otvorimo našu stranicu u pretraživaču, vidjet ćemo da se oko bloka pojavio puni crveni okvir širine 1px.

Pokazao sam vam unos dugačkog okvira u CSS-u (ovaj unos je veoma glomazan i obično ga niko ne koristi). Sve upute mogu biti sadržane u jednom redu. U našem slučaju to će izgledati ovako:

Bord:1px puna crvena;

One. Prvo naznačimo debljinu okvira, zatim naznačimo stil i boju okvira.

Vjerovatno 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; border-bottom: 3px tačkasto zeleno; border-left: 6px isprekidano žuto; border-right: 5px duplo #fe54e5;

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

Okviri se koriste apsolutno svuda: gotovo je teško pronaći dizajn web stranice koji ne koristi okvire. Vrlo često su stavke menija odvojene okomitom linijom, koja je određena svojstvom border-right ili border-left. Također možete kreirati zanimljive efekte za veze. Domaći samo na ovu temu:

Morate kreirati stranicu i postaviti 2 linka na nju. Dizajn ovih veza je puna linija; kada se lebdi, ova linija bi trebala postati točkasta.

Također je vrlo dobro koristiti okvire za elemente prilikom postavljanja stranice kako biste bolje razumjeli gdje se koji element nalazi. Barem, meni je mnogo jasnije i jasnije da napravim rasporede na ovaj način.

Ovo svojstvo stvara ivicu oko elementa. Više o ovoj nekretnini možete pročitati na linku, a u ovom članku ću općenito opisati kako funkcionira. Ove informacije će biti dovoljne da shvatite kako napraviti okvire koristeći CSS.

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

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

CSS okvir teksta

Evo primjera korištenja svojstva granice za kreiranje obruba koji je širok jedan piksel i crn:

Ovom paragrafu je dodijeljena klasa primjer-1.

U ovom primjeru smo također koristili svojstvo CSS padding. Ovo svojstvo specificira količinu uvlačenja od teksta do poteza (granice elementa).

Pogledajmo još jedan jednostavan primjer, samo da dočaramo poentu. Napravimo okvir širine tri piksela, crvene boje i bez unutrašnjeg dopuna (CSS svojstvo paddinga).

Ovom paragrafu je dodijeljena klasa primjer-2.

Kao što vidimo, bez dopuna, okvir teksta izgleda rogato.

Kako napraviti okvir za sliku u CSS-u

Okviri za slike se postavljaju na sličan način pomoću svojstva granice. Napravimo zeleni okvir debljine 4 piksela za sliku.

Primjer-img ( granica: 4px puna zelena; )

Evo kako će ovaj kod funkcionirati:

Kako zaokružiti uglove okvira u CSS-u

Zaokruživanje uglova ivice u CSS-u se vrši korišćenjem svojstva border-radius. Ovo svojstvo je predstavljeno u CSS3 i radi u svim modernim pretraživačima.

Svojstvo radijusa granice može imati od jedne do četiri vrijednosti. Ako postoji jedna vrijednost, onda ona postavlja stepen zaokruživanja za sve uglove. Dajemo primjer kako će ovo svojstvo raditi s jednom vrijednošću.

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

Evo kako to funkcionira:

svojstvo radijusa granice: 15px.>

Ako blok nema ivicu, onda postoji ivica granica-width: 0; , tada će područje ispunjeno bojom pozadine biti zaokruženo (svojstvo boje pozadine). Evo primjera:

Primjer-4 ( border-width: 0; // iako je ova vrijednost 0 po defaultu background-color: #DDD; border-radius: 15px; padding: 10px; )

Evo kako ovaj primjer funkcionira:

svojstvo radijusa granice: 15px.>

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

Za svojstvo radijusa granice, vrijednosti se mogu specificirati kao postoci.

Nacrtajmo krug u CSS-u. Da biste to učinili, uzmite kvadratni blok od 100 x 100 piksela i zaokružite uglove s CSS pravilom border-radius: 50% .

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

Evo kako ovaj primjer funkcionira:

Ovo u potpunosti pokriva temu „okviri u CSS-u“. Sretno u učenju CSS-a!

Za kontrolu granice elementa koristite generičko svojstvo granice. Ovo svojstvo vam omogućava da postavite debljinu, stil i boju ivice elementa u jednoj deklaraciji.

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

Možete odrediti stil ivice samo na jednoj strani elementa. Da biste to učinili, koristite svojstva border-top (gornja granica), border-right (desna ivica), border-bottom (donja ivica), border-left (lijeva ivica).

U ovom primjeru, svaka strana bloka ima različitu debljinu ivice, stil i boju.

Razmislite o tome kako možete kreirati ovakav oblik koristeći CSS:

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

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

Razmotrimo svaku od vrijednosti zasebno.

imanje u stilu granice Border style.

Svojstvo border-style postavlja stil ivice. U CSS-u, za razliku od HTML-a, ivica elementa može biti ne samo čvrsta. Sljedeće vrijednosti su prihvaćene za stil obruba:

1. nema - nema granice (podrazumevano).
2. čvrsta - čvrsta ivica.
3. duplo - duplo rub.
4. isprekidana - tačkasta granica.
5. tačkasta - ivica napravljena od niza tačaka.
6. greben - "greben" granica.
7. žljeb - "groove" granica.
8. umetak - depresivna granica.
9. početak - ekstrudirana granica.

Primjeri kako izgledaju.

bez granice (nema)

čvrsta granica

dvostruka granica

granica niza tačaka (tačkasta)

isprekidana granica

granica utora

granica grebena

uvučena granica (umetnuti)

ekstrudirani obrub (početak)

Usput, ako boju ivice postavite na crnu za okvir grebena, dobit ćete ovaj rezultat.

Div blok sa crnim rubom i stilom grebena.

Okvir izgleda solidno, ali to je zato što je stil grebena kreiran dodavanjem efekta crne sjene, a crni efekat nije vidljiv na crnom okviru.

Koristeći svojstvo border-style, stil ivice se može postaviti ne samo za sve strane bloka. Moguće je postaviti više vrijednosti za jedno svojstvo u stilu obruba; ovisno o broju vrijednosti, stil ivice će biti dodijeljen različitom broju strana bloka. Možete postaviti jednu, dvije, tri ili četiri vrijednosti. Pogledajmo primjere za svaki slučaj.

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

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

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

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

Svojstvo granice širine. Debljina ivice.

Da biste postavili širinu ivice elementa, koristite svojstvo border-width. Debljina ivice se može specificirati u bilo kojoj apsolutnoj mjernoj jedinici, na primjer u pikselima.

Kao i svojstvo u stilu granice, 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 border-width. Ukupno ih ima tri:

• tanka - tanka ivica;
• srednja - prosječna debljina;
• debela - debela ivica;

Debljina ivice: tanka.

Debljina ivice: srednja.

Debljina ivice: debela.

Svojstvo boje granice. Boja ivice.

Da biste kontrolisali boju obruba, koristite alat za boju obruba. Boje za ovo svojstvo mogu se postaviti bilo kojom metodom opisanom u članku "Boje u CSS-u", naime:

• Heksadecimalni zapis (#ff00aa) boje.
• RGB format je rgb(255,12,110) . RGBA format za CSS3.
• HSL i HSLA formati za CSS3.
• Naziv boje, na primjer crna. Za kompletnu listu naziva boja, pogledajte tabelu CSS imena boja.

Svojstvo boje granice također može imati jednu do četiri vrijednosti i tretira ih slično prethodnim svojstvima.

Jedna vrijednost (crvena).

Dvije vrijednosti (crveno crna).

Tri vrijednosti (crveno crno žuto).

Četiri vrijednosti (crvena crna žuta plava).

Sada se vratimo na gore navedeni problem i nacrtajmo figuru:

Evo koda koji crta takvu figuru, samo veću:

Zasebno podešavanje vrijednosti za strane

Gore je spomenuto da možete odrediti vrijednosti svojstva granice samo za jednu stranu bloka. Za ove namjene postoje nekretnine:

• granica-vrh (gornja granica)
• granica desno
• border-bottom
• granica-lijevo (lijeva granica)

Da vas podsjetim da su za sva svojstva navedene tri vrijednosti (debljina, stil i boja) bilo kojim redoslijedom. Ali postoje svojstva koja vam omogućavaju da postavite debljinu, boju i stil za svaku stranu zasebno. Pisanje ovih svojstava je izvedeno iz gore navedenog.

Opcije gornjeg ruba (border-top).

• border-top-color - postavlja boju gornjeg ruba elementa.
• border-top-width - postavlja debljinu gornje ivice elementa.
• border-top-style - postavlja stil gornjeg ruba elementa.

Opcije desne granice (border-desno).

• border-right-color - postavlja boju desne ivice elementa.
• border-right-width - postavlja debljinu desne ivice elementa.
• border-right-style - postavlja stil desne ivice elementa.

Opcije donjeg ruba (border-bottom).

• border-bottom-color - postavlja boju donjeg ruba elementa.
• border-bottom-width - postavlja debljinu donje granice elementa.
• border-bottom-style - postavlja stil donje granice elementa.

Opcije lijevog ruba (border-lijevo).

• border-left-color - postavlja boju lijevog ruba elementa.
• border-left-width - postavlja debljinu lijeve ivice elementa.
• border-left-style - postavlja stil lijeve ivice elementa.

Primjer korištenja ovih svojstava:

Svojstvo radijusa granice. Zaokruživanje graničnih uglova.

Svojstvo radijusa granice namijenjeno je zaokruživanju uglova granica elementa. Ovo svojstvo je predstavljeno u CSS3 i radi ispravno u svim modernim pretraživačima osim Internet Explorera 8 (i starijih verzija).

Vrijednosti mogu biti bilo koji brojevi koji se koriste u CSS-u.

Svojstvo radijusa granice: 15px.

Ako okvir bloka nije naveden, tada se filet pojavljuje s pozadinom. Evo primjera zaobljenog bloka bez obruba, ali s bojom pozadine:

Svojstvo radijusa granice: 15px.

Postoje svojstva za zaokruživanje svakog pojedinačnog ugla elementa. Ovaj primjer ih koristi sve:

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

Svojstvo radijusa granice: 15px.

Iako se ovaj kod može napisati u jednoj deklaraciji: border-radius : 15px 0 15px 0 . Činjenica je da se svojstvo radijusa granice može postaviti od jedne do četiri vrijednosti. U tabeli ispod su navedena pravila koja regulišu takve objave.

Nakon pažljivog proučavanja ove tabele, možete shvatiti da će najkraći unos za željeni stil biti ovakav: border-radius : 15px 0 . Postoje samo dva značenja.

Malo vežbe

Crtanje limuna koristeći CSS.

Evo koda za takav blok:

Margina: 0 auto; /* Centrirajte blok */ širina: 200px; visina: 200px; pozadina: #F5F240; granica: 1px čvrsta #F0D900; border-radius: 10px 150px 30px 150px;

Već smo nacrtali figuru:

Sada ostavimo trougao od njega:

Kod trougla je:

Margina: 0 auto; /* Centrirajte blok */ padding: 0px; širina: 0px; visina: 0; ivica: 30px puna bela; boja donjeg ruba: crvena;