Kako napraviti lijep css obrub. Okviri i obrube

Obrube su linije koje okružuju element (sadržaj koji sadrži i dopuna oko njega). Primjer koji smo već vidjeli su granice ćelija unutar tablice.

CSS pruža dvije vrste obruba: unutarnje granice i vanjske linije. CSS svojstva koja su odgovorna za oblikovanje obruba počinju riječju "border", što se može prevesti kao "Granica", "Granica". Prisutnost i format vanjskog obrisa određuju svojstva koja počinju riječju "okvir". Obris, za razliku od obruba, ne utječe na širinu i položaj okvira koji se uokviruje. Također, ne može se instalirati samo s jedne strane, npr granica- samo sa svih strana odjednom.

Najprije razgovarajmo o dizajnu granica, a zatim prijeđimo na obris.

granica-širina

Postavlja širinu obruba. Jasno je da je prema zadanim postavkama element okružen okvirima s četiri strane. Svojstvo vam omogućuje da postavite širinu obruba za sve strane iste i različite za svaku stranu. Ovisno o tome koju širinu želite dodijeliti rubovima, možete odrediti od jedne do četiri vrijednosti u pravilu.

Možete postaviti širinu koristeći uobičajene piksele, postotke i druge jedinice. CSS dužina i rezervirane riječi tanak(2px), srednji(4px) i gusta(6 piksela).

Širina obruba: 16px 12px 4px 8px;

u stilu granice

Određuje stil obruba. Napomena: ako ne postavite ovo pravilo, već navedite svojstvo granica-širina, tada uopće neće biti granica, pa ako želite vidljive granice, svakako navedite u stilu granice.

Svojstvo može imati dosta vrijednosti, a sve su jasno prikazane na donjoj slici.

Zadnji odlomak pokazuje da stil, kao i debljina, može biti različit za svaku stranu obruba:

obrubni stil: puna dvostruka točkasta nema

obrub-boja

Radi na isti način kao i prethodna svojstva, ali je odgovoran za boju obruba. Također se može postaviti od jedne do četiri vrijednosti, a rezultat vam je već poznat. Ako pravilo nije postavljeno, okviri će imati boju teksta trenutnog elementa ili, ako nije navedena, boju teksta nadređenog elementa.

Boja obruba: # C85EFA;

granica

Pojednostavljuje zapis i sprema kod dopuštajući vam da postavite sva navedena svojstva za granice na svim stranama elementa u jednom retku:

P (obrub: 2px puna zelena;)

Za postavljanje različitih pravila za okvire s različite strane mogu se koristiti sljedeće vrijednosti:

• obrub-vrh je gornja granica.
• granica-desno- točno.
• granica-dno- dno.
• granica-lijevo- lijevo.

P (rub-lijevo: žuta točkasta 6px;)

obris-širina

Isto kao granica-širina, samo za vanjski, ne i unutarnji okvir. Postavlja debljinu obrisa na iste vrijednosti kao granica-širina... Osim debljine okvira elementa, morate odrediti njegov stil, inače neće biti obrisa.

u stilu obrisa

Vrijednosti svojstava dupliciraju vrijednosti u stilu granice... Pravilo postavlja stil vanjskog puta.

CSS okvir element je jedan ili više redaka koji okružuju sadržaj elementa i padding. Okvir se postavlja pomoću kratkog granična svojstva... Stil obruba se postavlja pomoću tri svojstva: stil, boja i širina.

Stiliziranje obruba i obruba HTML elemenata s CSS svojstvima

1. Border-stil

Prema zadanim postavkama, granice se uvijek iscrtavaju na vrhu pozadine elementa, a pozadina se proteže do vanjskog ruba elementa. Stil okvira određuje njegov prikaz, bez ovog svojstva okviri uopće neće biti vidljivi. Za element možete postaviti obrub za sve strane u isto vrijeme pomoću svojstva border-style ili za svaku stranu zasebno koristeći svojstva praćenja border-top-style, itd. Nije naslijeđena.

u stilu granice (obrub-vrh-stil, obrub-desno-stil, obrub-dolje-stil, obrub-lijevo-stil)
vrijednosti:
nijedan	Zadana vrijednost znači da nema obruba. Također uklanja obrub elementa iz grupe elemenata sa postavljenom vrijednošću ove imovine.
skriven	Ekvivalentno ničemu.
točkasta	točkasta
isprekidana	isprekidana
čvrsta	čvrsta
dvostruko	dvostruko
utor	utor
greben	greben
umetnuti	umetnuti
na početku	na početku
{1,4}	Istovremeno nabrajanje četiri različita stila za granice elementa, samo za svojstvo stila obruba: (stil obruba: puna točkasta nijedna točkasta;)
početni
naslijediti

Sintaksa

P (stil obruba: čvrst;) p (stil obruba na vrhu: čvrst;)

2. Boja obruba border-color

Svojstvo istovremeno postavlja boju granica svih strana. Uz pomoć razjašnjavajućih svojstava, možete postaviti prilagođenu boju za obrub svake strane elementa. Ako za obrub nije navedena boja, bit će ista kao i boja teksta elementa. Ako element nema tekst, tada će boja obruba biti ista kao i boja teksta nadređenog elementa. Nije naslijeđena.

obrub-boja (obrub-gore-boja, obrub-desna-boja, obrub-donja-boja, obrub-lijeva-boja)
vrijednosti:
transparentan	Postavlja prozirnu boju obruba. U tom slučaju ostaje širina okvira. Može se koristiti za promjenu boje obruba kada zadržite pokazivač miša iznad elementa kako biste izbjegli pomicanje elementa.
boja	Boja okvira se postavlja pomoću vrijednosti svojstava. (boja obruba: # cacd58;)
{1,4}	Navođenje četiri u isto vrijeme različite boje za obrube elemenata, samo za svojstvo border-color: (boja obruba: # cacd58 # 5faf8a # b9cea5 # aab238;)
početni	Postavlja vrijednost svojstva na zadanu vrijednost.
naslijediti	Nasljeđuje vrijednost svojstva od nadređenog elementa.

Sintaksa

P (boja obruba: # cacd58;)

3. Širina granice-širina

Širina okvira određena je pomoću jedinica duljine ili ključne riječi... Ako je svojstvo stila obruba postavljeno na ništa, a obrub elementa postavljen na neku širinu, tada u u ovom slučajuširina granice postavljena je na nulu. Nije naslijeđena.

Sintaksa

P (širina obruba: 2px;)

4. Postavljanje okvira s jednim svojstvom

Svojstvo granice vam omogućuje kombiniranje sljedeća svojstva: širina obruba, stil obruba, boja obruba, na primjer:

Div (širina: 100px; visina: 100px; obrub: 2px čvrsto siva;)

U ovom slučaju, navedena svojstva će se primijeniti na sve granice elementa u isto vrijeme. Ako bilo koja od vrijednosti nije navedena, njezino će mjesto zauzeti zadana vrijednost.

5. Postavljanje granice za jedan obrub elementa

U slučaju kada trebate postaviti drugačiji stil obruba elementa, možete ga koristiti kratka bilješka za odgovarajuću granicu.
Sljedeća svojstva kombiniraju sljedeća svojstva u jednu deklaraciju: širina obruba, stil obruba i boja obruba. Popis svojstava je specificiran navedenim redoslijedom, dok se jedna ili dvije vrijednosti mogu izostaviti, u kom slučaju će njihove vrijednosti uzeti svoje zadane vrijednosti.

Stil gornjeg ruba se postavlja pomoću svojstva border-top, donjeg je border-bottom, lijevog obruba lijevo, a desnog ruba desnog.

Sintaksa

P (obrub-vrh: 2px čvrsto siva;)

6. Vanjski obris

Svojstvo postavlja vanjsku granicu oko elemenata (tj. izvan normalne granice). Glavna svrha ovog svojstva je istaknuti element. Za razliku od svojstva granice, primjena ovog svojstva ne utječe na veličinu ili položaj elementa, budući da jest. obris je nacrtan na vrhu bloka elemenata, što zauzvrat može uzrokovati preklapanje margine element i susjedna područja.

Također, vanjska kontura, za razliku od obruba elementa, okružuje element sa svih strana, uokvirujući ga u cijelosti.

Vanjska kontura je uvijek pravokutna; ne prati granice okvira za koji je postavljen radijus granice.

Svojstvo obrisa omogućuje vam kombiniranje sljedećih svojstava: boja obrisa, stil obrisa, širina obrisa. Ako bilo koja od vrijednosti nije navedena, njezino će mjesto zauzeti zadana vrijednost.

Div (širina: 100px; visina: 100px; obris: # cacd58 solid 2px;)

6.1. Obrisni stil obris-stil

Izgled vanjske linije konture postavlja se na isti način kao i kod stila obruba elementa. Nije naslijeđena.

Sintaksa

P (stil obrisa: greben;)

6.2. Boja obrisa obris-boja

Boja vanjskog obrisa može se dodijeliti samo kada postavljena vrijednost u stilu obrisa. Nije naslijeđena.

Sintaksa

P (stil obrisa: greben; boja obrisa: srebrna;)

6.3. Debljina obrisa širina obrisa

Debljina vanjske konturne linije postavlja se na isti način kao i debljina okvira elementa. Nije naslijeđena.

Sintaksa

P (stil obrisa: točkasto; širina obrisa: 5px;)

Za kontrolu granice elementa, koristite univerzalno svojstvo granica. 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.

Misli kao kad CSS pomoć možete kreirati ovakav oblik:

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, u HTML razlike, granica elementa može biti ne samo čvrsta. 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 formati i HSLA za CSS3.
• Naziv boje, kao što je crna. Cijeli popis nazivi boja navedeni su u CSS tablici 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 je uvedeno u CSS3 i radi ispravno u svim moderni preglednici, uz iznimku Internet Explorer 8 (i stariji).

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;

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 stvarati razni efekti radi bolje percepcije sadržaja 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 sa specifično ime bojama ili u RGB format(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

obrubni stil: isprekidani

obrubni stil: isprekidani

obrubni stil: čvrst

obrubni stil: dvostruki

obrubni stil: utor

rubni stil: greben

obrubni stil: umetnuti

obrubni stil: početak

Četiri različiti okviri

obrubni stil: točkasti

obrubni stil: isprekidani

obrubni stil: čvrst

obrubni stil: dvostruki

obrubni stil: utor

rubni stil: greben

obrubni stil: umetnuti

obrubni stil: početak

Četiri različita okvira

2.2. Primjer. Boja obruba se mijenja pri lebdenju mišem

Ovaj primjer je vrlo jednostavan, ali zanimljiv. Pokazuje kako se za kreiranje mogu koristiti pseudo-klasa: hover i CSS granica jednostavni efekti(na primjer, za jelovnik).

Kada zadržite pokazivač miša iznad bloka, promijenit će se boja obruba

Ovako to izgleda na stranici:

2.3. Primjer. Kako napraviti transparentan obrub

Okvir se može učiniti prozirnim. Ovaj učinak je rijedak, ali ponekad može biti vrlo koristan za web dizajnere. Da biste postavili prozirnost, trebate koristiti postavku boje u obliku RGBA (R, G, B, P), gdje posljednji parametar prozirnost je postavljena (stvarni broj od 0,0 do 1,0)

Ovako to izgleda na stranici:

3. Debljina obruba: svojstvo širine granice

Određuje debljinu linije. Prije smo to pitali ujednačen opis granica.

CSS sintaksa granica-širina

širina obruba: tanak | srednje | gusta | značenje;

• tanka - tanka linija debljine
• srednja - prosječna širina linije
• debljina - debljina debljine linije

U nastavku su neki primjeri. Najneobičnija stvar bit će različita debljina obruba sa svake strane.

granica-širina: tanka

širina obruba: srednja

granica-širina: debela

Različite debljine na rubovima

Ovako to izgleda na stranici:

granica-širina: tanka

širina obruba: srednja

granica-širina: debela

Različite debljine na rubovima

4. Kako napraviti obrub sa samo jednim rubom (borderom)

Svojstvo CSS granica ima izvedena svojstva za postavljanje jednostranih granica na element:

• border-top - za postavljanje obruba na vrh (gornja granica)
• border-bottom - za postavljanje granice na dnu (donja granica)
• border-right - za postavljanje granice udesno (desna granica)
• border-left - za postavljanje granice na lijevo (lijevu granicu)

Te se granice mogu kombinirati, t.j. propisati svoj okvir za svaki smjer. Sintaksa je potpuno ista kao i granica.

Tu su i nekretnine

• border-top-color - postavlja boju gornjeg ruba
• border-top-style - Postavlja stil gornjeg ruba
• border-top-width - postavlja debljinu gornje granice
• itd. za svaki smjer

Po mom mišljenju, lakše je napisati sve u retku nego proizvesti dodatni tekst u stilovima. Na primjer, sljedeća svojstva bit će ista

/* Opis dva identična stila: */

4.1. Primjer. Prekrasan okvir za isticanje citata

Primjer okvira za citate

Ovako to izgleda na stranici:

Primjer okvira za citate

Bilješka
Možete postaviti zaseban obrub za svaku stranu.

5. Kako napraviti više obruba na html elementu

Ponekad morate napraviti više obruba. Navedimo primjer

5.1. Prva opcija s više obruba

Ovako to izgleda na stranici:

Postoji drugi način kroz preklapanje sjena.

5.2. Miješanje sjena za stvaranje više obruba

Ovako to izgleda na stranici:

6. Zaokruživanje uglova na granicama (granica-radijus)

Za stvaranje prekrasni okviri koristiti imovinu CSS radijus granice(dostupno samo u CSS3). S njim možete zaokružiti kutove, što stvara potpuno drugačiji izgled. na primjer

7. CSS uvučena linija

Uvučene linije mogu izgledati spektakularno tamna pozadina, što nije prikladno za svaku stranicu.

---

Ovako to izgleda na stranici:

Da biste pristupili obrubu iz JavaScripta, morate napisati sljedeću konstrukciju:

document.getElementById ("elementID"). style.border= "VRIJEDNOST" (! LANG:

Jedna od zabavnih primjena svojstva CSS3 box-shadow je stvaranje dvostruki okvir 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čita upotreba pozadinska slika daleko je od idealnog.

V ovu lekciju predstavlja 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 okvir:

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

Najviše najbolja metoda budući da je potreban samo jedan redak koda s postavkama svojstva box-shadow.

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čni trenutak- korištenje neprozirnih boja, što stvara jasnu granicu između okvira.

Poput svojstva obrisa, sjena okvira nema utjecaja na susjedni elementi i može ih preklapati. Stoga morate postaviti polje za formaciju izgled kompozicije.

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

Metoda 4: dodatni element div

V ovu metodu korišten od vanjski element