Izrada obruba u CSS-u. Granično vlasništvo. Izrada obruba s CSS css dvostrukim obrubom

Border-image je svojstvo koje vam omogućuje postavljanje pozadinske slike za obrub elementa. Svojstvo ispunjava okvir navedenom slikom, raspoređujući dijelove slike tako da se kutni dijelovi nalaze u kutovima okvira, a razmaci između njih su ispunjeni ostatkom slike.

Ovo svojstvo olakšava izvođenje nevjerojatnih stvari koje su prije zahtijevale 3 do 8 slika i manipulaciju oznakama.

Ažuriraj: Radi u Firefoxu od verzije 29.

Veličina slike jednaka je debljini okvira. Boja i stil obruba se zanemaruju.

Ako postavite samo border-image-source, slika ispunjava kutove, ne znajući što dalje:

Obrub: 80px čvrsta prozirna; border-image: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Obrub-slika-srez

Važno svojstvo koje određuje veličinu komada slike koji će ispuniti kutove okvira. Ostali dijelovi će se koristiti za popunjavanje prostora između uglova prema algoritmu navedenom u border-image-repeat.

Moguće vrijednosti:

<проценты>- izračunavaju se u odnosu na veličinu slike. Horizontalno u odnosu na širinu, okomito - u odnosu na visinu.<числа>- pikseli (za bitmap) ili koordinate (za vektor). Mjerne jedinice nisu navedene. ispuniti - ključna riječ nadopunjujući prethodne vrijednosti. Ako je navedeno, slika se ne izrezuje s unutarnjim rubom okvira, već ispunjava i područje unutar okvira. Vrlo korisno za zaobljene okvire.

Više vrijednosti može se odvojiti razmacima za definiranje vrijednosti za svaku stranu.

Zbroj vrijednosti suprotnih strana mora biti manji od veličine slike, inače neće biti ničega što bi ispunilo prostor između uglova.

Obrub: 80px čvrsta prozirna; border-image: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100;

Obrub-slika-ponavljanje

Svojstvo određuje kako će praznine između uglova biti popunjene.

Moguće vrijednosti: rastezanje - rasteže područje punjenja slike. Zadana vrijednost; ponoviti - ponavlja dio punjenja, dok su spojevi s kutnom slikom vidljivi; okrugli - ispunjava prazninu između uglova. Može se vidjeti šav na sredini strane. Najtočnija akcija. prostor - Djeluje kao ponavljanje. Nisam našao razliku.

Možete postaviti dvije vrijednosti odjednom, prva će biti odgovorna za ponašanje slike u gornjem i donjem okviru, druga - za lijevo i desno.

Obrubna slika: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100; border-image-repeat: ponoviti;

Lijevo je ponavljanje, desno je okruglo.

Ako je obrub složen i strane se ne uklapaju dobro, rastezanje će raditi ispravnije, evo primjera.

Granica-širina slike

granica-širina slike

Svojstvo kontrolira širinu vidljivog dijela okvira, skalira ga. Ako je ova vrijednost veća od širine obruba, slika obruba će puzati ispod sadržaja čak i ako svojstvo ispune nije postavljeno.

Moguće vrijednosti:<длина>- vrijednosti u px ili em;<%>- vrijednosti u postocima u odnosu na veličinu slike;<числа>- brojčana vrijednost koja se množi s obrubom auto - ključna riječ. Ako je navedeno, vrijednost je jednaka odgovarajućem rubu-slike-slici. Ako nema odgovarajuće veličine, koristi se vrijednost granice širine, a slika ispunjava cijeli kut obruba, puzeći ispod sadržaja. Radi malo čudno.

Obrub: 60px čvrsta prozirna; border-image: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); granica-slika-slice: 80; border-image-repeat: okrugli; širina slike obruba: 160px;

S desne strane je obrub s granica-širina slike. Primjer s lijeve strane pokazuje kako je slika izrezana po unutarnjim rubovima okvira. Desni okvir se zbog povećane širine uvukao ispod sadržaja.

Granica-slika-početak

Zanimljivo svojstvo koje vam omogućuje premještanje okvira iz elementa. Negativne vrijednosti nisu podržane.

Moguće vrijednosti:<длина>- vrijednosti u px ili em;<числа>je brojčana vrijednost kojom se širina obruba množi.

Obrub: 60px čvrsta prozirna; border-image: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); granica-slika-slice: 120; border-image-repeat: okrugli; border-image-outset: 60px 10px 50px 120px;

S desne strane je primjer s obrubom-slike-početak. Ovo svojstvo ne utječe na dimenzije elementa, a obrub može preklapati susjedne elemente.

Vlasništvo CSS – « granica», Omogućuje postavljanje debljine, boje i vrste linije perimetra oko elementa. Parametri ovog svojstva mogu se napisati u jednom retku, odvojeni razmacima i bilo kojim redoslijedom.

• - širina linije jedan piksel
• - puna linija
• - Bijela boja
• - Crna boja
• - siva boja

Granica čvrstog elementa

Isprekidani obrub elementa

Točkasti obrub elementa

Granica elementa s dvostrukom crtom

Vlasništvo pojedinih dionica granice

Ugrađeni valoviti okvir u volumenu

Konveksni valoviti okvir u volumenu

Volumetrijski depresivni okvir

Volumetrijski konveksni okvir

Vodiči / CSS /

Lekcija 7. Uokvirite CSS element

Gotovo svaka stranica koristi svojstvo koje stvara obrub oko elementa. Potreban je ili za gumbe ili za blokove s tekstom. Za stvaranje obruba, element u CSS-u ima dva svojstva: obrub i obris. Razmotrimo ih.

granica

Ovo svojstvo je potrebno za postavljanje obruba oko elementa, označava njegovu granicu u web dokumentu, širina obruba se uzima u obzir pri pozicioniranju elementa. Ima 3 vrijednosti - boju, debljinu i vrstu okvira.

Sintaksa za svojstvo granice je sljedeća:

obrub: Vrsta širine Boja;
Možete odabrati drugačiji redoslijed navođenja vrijednosti svojstava, ali glavna stvar je kroz razmak.

Debljina (širina) okvira mora biti navedena u pikselima (px) ili postocima (%).
Boja se može odrediti ili u RGB (crveno zeleno plavo) formatu ili u HTML HEX kodu.

Ispod su VRSTE LINIJA sa svojim imenima:

Kako postaviti granice na element? radimo kako slijedi:

#blok (
obrub: 3px solid # 0085cc; / * postavite plavu liniju od 3px * /
}

Ako želite instalirati jedan-dva-tri okviri s određene strane, onda to označavamo ovako:

obrub-vrh- okvir na vrhu;
granica-dno- okvir na dnu;
granica-lijevo- okvir s lijeve strane;
granica-desno- okvir s desne strane;

Blok (
border-right: 3px solid # 0085cc;
obrub-dno: 2px isprekidano # 0085cc;
}

Ako želiš ukloniti okvire element u CSS-u, zatim upišite u granicu svojstva - nema

Prazan (
granica: nema; / * element s praznom klasom neće imati obrub * /
}

obris

Outline je svojstvo koje vam je potrebno za postavljanje vanjske granice elementa.

Tamo je dvije razlike od granice:
Prvo, linija navedena u obrisu NEĆE utjecati na položaj samog okvira, njegovu širinu i visinu.
Drugo, ne postoji mogućnost ugradnje okvira s određene strane.
Sintaksa je ista kao i granica.

obris: 2px s točkama # 0085cc; / * plavi obrub s točkama od 2 piksela * /
Za obris, kao i za obrub, možete ukloniti obrube tako da upišete none:

Hvala na pažnji!

Prethodni članak
Lekcija 6.

Granice elementa.

Padding i margine u CSS-u. Što su margina i padding? Sljedeći članak
Lekcija 8. Kako postaviti boju teksta i pozadinu elementa u CSS-u?

Komentari na članak (vk.com)

granica

Podrška za preglednik

12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

Opis

Svojstvo CSS omogućuje vam da istovremeno postavite širinu, stil i boju za obrub bloka. Granica bloka je pravilna linija/okvir koji okružuje blok sa svih strana. Treba imati na umu da kada dodate obrub, to će utjecati na ukupnu veličinu bloka.

Vrijednosti su odvojene razmakom i mogu biti bilo kojim redoslijedom, preglednik će odrediti koja odgovara traženom parametru. Sve tri vrijednosti su neobavezne, širina i/ili boja se mogu izostaviti, u kom slučaju će se umjesto vrijednosti koja nedostaje, koristiti vrijednost postavljena za zadano svojstvo, tj. ako na primjer nije navedena širina, tada će se koristiti zadana vrijednost svojstva. Tablica ispod sintakse pokazuje vrijednosti kojih svojstava možete koristiti.

Napomena: Da biste postavili granice samo na određenim stranama elementa, koristite sljedeća svojstva: obrub-vrh, obrub-dolje, obrub-lijevo, obrub-desno.

Savjet: Općenito, kada koristite obrub, morate dodati padding.

CSS svojstvo: granica

Dodaju razmak između okvira bloka i njegovog sadržaja: teksta, slika ili podređenih oznaka. Obično se obrub prikazuje blizu sadržaja elementa, ovo je korisno samo ako trebate postaviti obrub oko slike.

Sintaksa

obrub: širina obruba u stilu granice boja | naslijediti;

Vrijednosti svojstva

Primjer

Ovdje je neki tekst.

Proizlaziti ovaj primjer u prozoru preglednika:

Kako postaviti boju, stil i veličinu obruba u okvirima.

U označnim jezicima, rubnik ( granica), imaju samo tablice, slike i okvire, u nekim slučajevima moguće je postaviti boju obruba i to je to.

Atribut granice

Kaskadni listovi stilova daju nam više mogućnosti, ali prije svega.

U CSS-u možemo kontrolirati širinu obruba s granica-širina, ili točnije, možemo kontrolirati debljinu svake strane zasebno:
granica-vrh-širina- debljina gornje granice
granica-desno-širina- debljina desne granice
granica-dno-širina- debljina donje granice
granica-lijeva-širina- debljina lijeve granice
Ali može postojati i skraćeni oblik:
P (širina obruba: gore desno dolje lijevo;)(gore desno dolje lijevo).
Širina rubnika može se podesiti:
figure DIV (širina obruba: 5px), od nule do beskonačnosti, tj. pozitivan.
tanak- tanki obrub, DIV (širina obruba: tanka)
srednji- srednji obrub, DIV (širina obruba: srednja)
gusta- debeli obrub, DIV (širina obruba: debela)
S brojevima je jasno, ali s ovim vrijednostima sve ovisi o pregledniku, ali ipak tanak<= medium <= thick .

Također možemo kontrolirati boju obruba s obrub-boja ili točnije s bojom svake strane:
obrub-vrh-boja boja gornje granice;
obrub-desno-boja boja desne granice;
obrub-dno-boja boja donje granice;
obrub-lijevo-boja boja obruba s lijeve strane.
Vrijednost boje je postavljena kao za boja, tj. jedna od 16 boja: akva, crna, plava, fuksija, siva, zelena, limeta, kestenjasta, mornarska, maslinasta, ljubičasta, crvena, srebrna, sivkasta, bijela ili žuta, također se mogu postaviti boje: boja: # 000000, boja: # AF0 , boja: rgb (255,0,0) ili boja: rgb (100%, 0%, 0%).
Bez obzira na to koju shemu boja odaberete, preglednici će je i dalje prevesti boja: rgb (255,0,0)... Na primjer boja: limeta = boja: # 00ff00 = boja: # 0F0 = boja: rgb (0%, 100%, 0%), ali za preglednik to nije važno boja: rgb (0,255,0), tj. izračunat će ovu vrijednost.

Ako se debljinom i bojom obruba može kontrolirati HTML, tada će stil ( u stilu granice) Samo CSS !!!
Stilom može upravljati svaka strana zasebno:
obrub-top-stil stil gornje granice;
granično-desni stil stil desne granice;
obrub-dno-stil stil donje granice;
granično-lijevo u stilu stil obruba s lijeve strane.
Pogledajmo sada vrijednosti stila:
1)obrubni stil: nema- Ovo je zadana vrijednost, slično širini obruba: 0.
2)obrubni stil: skriven- Isto osim tablica, koje ćemo pogledati kasnije.
3)obrubni stil: točkasti- Točkasti obrub.
4)obrubni stil: isprekidani- Isprekidana granica.
5)obrubni stil: čvrst- Granica pune linije, t.j. kao u HTML-u.
6)obrubni stil: dvostruki- Dvostruki obrub pune linije, ovdje vam je potrebna širina obruba od najmanje 3 piksela.
7)obrubni stil: utor- Granica izgleda kao da je urezana u platno.
8)rubni stil: greben- Granica izgleda kao da viri iz platna.
9)obrubni stil: umetnuti- Cijela kutija izgleda kao da je utisnuta u platno.
10)obrubni stil: početak- Suprotno prethodnom.
Neki preglednici mogu zanemariti vrijednosti: točkasto, isprekidano, dvostruko, utor, greben, uložak i početak i ispisati ih kao čvrste, tj. uobičajena granica.

Sve je to naravno tako, ali svi gore navedeni primjeri su samo princip rada, a ne mehanizam.
Vlasništvo pravila granica podrazumijeva (obrub: boja stila veličine;), ovo pravilo se izvršava ako su prisutne sve tri vrijednosti i samo ovim redoslijedom, npr. H1 (rub: 5px dvostruko crvena;), ali mogu postojati iznimke ako te vrijednosti daju označni jezici, na primjer, za tablicu TABLICA (rub: 2px), tj. navedena je samo jedna vrijednost.

Da biste upravljali ne cijelim rubnikom, već svakim dijelom zasebno, postoje pravila:
(obrub-vrh: boja stila veličine;) Kontrola gornjeg rubnika;
(bord-desno: boja stila veličine;) Kontrola rubnika s desne strane;
(obrub-dno: boja stila veličine;) Kontrola donjeg rubnika;
(obrub lijevo: boja stila veličine;) Kontrola rubnika s lijeve strane.
Ova pravila se mogu koristiti zasebno ili sva zajedno.

Iznimka je ovo pravilo:
H1 (
obrub: 4px puna zelena;
}
Stvar je u tome da u CSS-u posljednje pravilo ima najveći prioritet, u ovom slučaju svojstvo granice sadrži border-left i stoga će pravilo border-left biti zanemareno, upravo ovako:
H1 (
obrub: 4px puna zelena;
obrub-lijevo: 2px dvostruko crveno;
}
Od početka smo postavili pravila za cijeli rubnjak, a potom i za pojedina područja.

Imam sve na granicama za elemente, osim što ćemo razmotriti neka svojstva kada dođemo do tablica i drugih iznimaka.

CSS: granica. Granice elementa.

CSS3 granice

CSS3 granice

Uz CSS3, možete kreirati zaobljene obrube, dodavati sjene spremnicima i koristiti sliku kao obrub - sve bez upotrebe programa za dizajn poput Photoshopa.

U ovom vodiču ćete naučiti o sljedećim svojstvima obruba:

• granica-radijus
• kutija-sjena
• granica-slika

Podrška za preglednik

Vlasništvo	Podrška za preglednik
granica-radijus
kutija-sjena
granica-slika

Internet Explorer 9 podržava neka od novih svojstava obruba.

Firefox zahtijeva prefiks -moz- za obrubnu sliku.

Chrome i Safari zahtijevaju -webkit- prefiks za obrubnu sliku.

Opera zahtijeva prefiks -o- za obrubnu sliku.

Safari također zahtijeva -webkit- prefiks za box-shadow.

Opera podržava nova svojstva obruba.

CSS3 zaobljeni kutovi

Dodavanje zaobljenih kutova u CSS2 bilo je nezgodno. Morali smo koristiti drugu sliku za svaki kut.

U CSS3, stvaranje zaobljenih kutova je jednostavno.

U CSS3, svojstvo border-radius se koristi za stvaranje zaobljenih kutova:

Ovaj blok ima zaobljene kutove!

CSS3 Box Shadow

U CSS3, svojstvo box-shadow koristi se za dodavanje sjena u spremnike:

CSS3 obrubna slika

Uz CSS3 svojstvo border-image, možete koristiti sliku za izradu obruba:

Svojstvo border-image omogućuje vam da odredite granicu-sliku!

Originalna slika korištena za izradu obruba je vaša:

Nova svojstva granica

Atribut granice

Atribut granice, oznaka

, koristi se za određivanje debljine obruba oko tablice.

HTML obrube

Dopušteno je koristiti obrub bez vrijednosti, tada će debljina obruba biti jednaka jednom pikselu. Okvir se prema zadanim postavkama prikazuje s 3D efektima, ali ako dodatno primijenite atribut pozadine, okvir će postati “ravan”.

Osim toga, ako je atribut obruba različit od nule, tada preglednici također pokazuju tanke granice oko samih ćelija. Prikaz ovih granica može se kontrolirati pomoću atributa pravila.

Vrijednosti

Vrijednost atributa može biti bilo koji nenegativan broj koji specificira veličinu u pikselima.

Zadana vrijednost: 0.

Sintaksa

Obavezni atribut: nema.

Primjer HTML-a: Primjena atributa Border

Primjer rezultata

Proizlaziti. Primjena atributa granice.

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

Jedna od zabavnih primjena svojstva CSS3 box-shadow je stvaranje dvostrukog obruba oko elementa. Vrlo zanimljiv efekt za ukrašavanje stranica, ali će raditi samo u novijim verzijama preglednika koji podržavaju sjeni okvira.

Međutim, postoji nekoliko drugih metoda za stvaranje ovog efekta. Štoviše, očito korištenje pozadinske slike daleko je od idealnog.

Ovaj vodič uvodi pet metoda za stvaranje dvostrukog obruba oko elementa. I samo jedan od njih zahtijeva sliku, a svi ostali koriste čisti CSS kod s izvrsnom podrškom u preglednicima.

Metoda 1: obrub i obris

Ova metoda radi samo u preglednicima koji podržavaju svojstvo obrisa (svi osim IE6 / 7). Elementu dodajete svojstva obruba i obrisa.

Jedan (obrub: čvrsti 6px #fff; obris: čvrsti 6px # 888;)

Razlog zbog kojeg ova metoda radi je taj što okvirni okvir uvijek crta na vanjskoj strani pravokutnika. Problem sa svojstvom obrisa javlja se kada se koriste plutajući elementi, jer se obrub preklapa sa susjednim elementima.

Metoda 2: pseudo element

Ova metoda zahtijeva apsolutno pozicioniranje okvira:

Dva (obrub: čvrsti 6px #fff; položaj: relativan; z-indeks: 1;) .dva: prije (sadržaj: ""; prikaz: blok; položaj: apsolutni; vrh: -12px; lijevo: -12px; obrub: solid 6px # 888; širina: 312px; padding-bottom: 12px; min-height: 100%; z-index: 10;)

Ključne točke su postavljanje svojstva z-indeksa (tako da pseudo element preklapa sadržaj), pozicioniranje i vrijednost minimalne visine. Potonje svojstvo čuva elastičnost okvira.

Metoda 3: sjena

Najbolja metoda jer zahtijeva samo jedan redak koda s postavkama svojstva sjene okvira.

Tri (sjena okvira: 0 0 0 6px #fff, 0 0 0 12px # 888;)

Dvije sjene se koriste za stvaranje dvostrukog obruba. Odvajaju se zarezima. Zamućenje je postavljeno na 0. Budući da se druga sjena preklapa s prvom, ona ima dvostruko veću širinu. Ključna točka je korištenje neprozirnih boja, što stvara jasnu granicu između okvira.

Kao i svojstvo obrisa, sjena okvira ne utječe na susjedne elemente i može ih preklapati. Stoga je potrebno postaviti polje za formiranje izgleda kompozicije.

Naravno, podrška za svojstvo box-shadow ograničena je na novije preglednike.

Metoda 4: dodatni element div

Ova metoda koristi vanjski element