Kako napraviti lijepe ivice css. Okviri i ivice

Ivice su linije koje okružuju element (sadržaj koji sadrži i dopuna oko njega). Primjer s kojim smo se već susreli su granice ćelija unutar tabele.

CSS pruža dvije vrste granica: unutrašnje ivice i vanjske linije. CSS svojstva odgovorna za dizajn okvira počinju riječju "border", što se jednostavno može prevesti kao "Frame", "Border". Prisutnost i format vanjske konture su specificirani svojstvima koja počinju riječju "outline". Outline, za razliku od obruba, ne utiče na širinu i položaj okvira. Osim toga, ne može se instalirati samo na jednoj strani, kao granica- samo sa svih strana odjednom.

Prvo, hajde da pričamo o dizajnu granice, a zatim pređimo na nacrt.

border-width

Postavlja širinu ivica. Jasno je da je element po defaultu okružen okvirima sa četiri strane. Svojstvo vam omogućava da postavite širinu ivica da bude ista za sve strane ili različita za svaku stranu. Ovisno o tome koju širinu želite dodijeliti granicama, možete odrediti od jedne do četiri vrijednosti u pravilu.

Možete postaviti širinu koristeći poznate piksele, procente i druge jedinice css dužine, i rezervirane riječi tanak(2px) srednje(4px) i debelo(6px).

Širina ivice: 16px 12px 4px 8px

obrubni stil

Određuje stil okvira. Imajte na umu da ako ne postavite ovo pravilo, već navedete svojstvo border-width, tada uopće neće biti granica, pa ako želite vidljive granice, svakako navedite obrubni stil.

Može biti dosta vrijednosti za svojstvo, sve su jasno prikazane na donjoj slici.

Zadnji paragraf pokazuje da stil, kao i debljina okvira sa svake strane mogu biti različiti:

u stilu obruba: puna dvostruka tačka bez

boja ivice

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

Boja ivice: #C85EFA;

granica

Pojednostavljuje pisanje i čuva kod omogućavajući vam da postavite sva navedena svojstva za granice sa svih strana elementa u jednom redu:

P ( granica: 2px puna zelena; )

Za postavljanje različitih pravila okvira sa različite stranke možete koristiti sljedeće vrijednosti:

• granični vrh- gornja granica.
• granica desno- u redu.
• border-bottom- dno.
• granica-lijevo- lijevo.

P (obrub lijevo: 6px sa žutim tačkama; )

outline-width

Isto kao border-width, samo za vanjski okvir, ne i za unutrašnji okvir. Postavlja debljinu obrisa na iste vrijednosti kao border-width. Osim debljine ivice elementa, morate odrediti njegov stil, inače neće biti obrisa.

outline style

Vrijednosti svojstava dupliciraju vrijednosti obrubni stil. Pravilo postavlja stil vanjske konture.

CSS okvir Element je jedna ili više linija koje okružuju sadržaj elementa i njegove dopune. Okvir se postavlja pomoću kratkog granična svojstva. Stil okvira se postavlja pomoću tri svojstva: stil, boja I širina.

Dekoracija ivica i ivica HTML elemenata pomoću CSS svojstava

1. Border-stil

Podrazumevano, ivice se uvek crtaju na vrhu pozadine elementa, a pozadina se proteže do spoljne ivice elementa. Stil okvira određuje njegov prikaz, bez toga svojstva okvira uopće neće biti vidljiva. Za element možete postaviti obrub za sve strane u isto vrijeme pomoću svojstva border-style, ili za svaku stranu posebno koristeći kvalifikaciona svojstva u stilu border-top, itd. Nije naslijeđen.

obrubni stil (obrub-vrh-stil, obrub-desno-stil, obrub-dono-stil, obrub-lijevo-stil)
vrijednosti:
nijedan	Zadana vrijednost znači da nema okvira. Također uklanja ivicu elementa iz grupe elemenata sa postavljenom vrijednošću datoj imovini.
skriveno	Ekvivalentno ničemu.
tačkasta	tačkasta
isprekidano	isprekidano
solidan	solidan
duplo	duplo
groove	groove
greben	greben
umetnuti	umetnuti
početak	početak
{1,4}	Nabrojite četiri različita stila za granice elementa odjednom, samo za svojstvo border-style: (stil ivice: puna tačkasta nijedna tačkasta;)
početni
nasljediti

Sintaksa

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

2. Boja ivice Boja ivice

Svojstvo postavlja boju okvira sa svih strana u isto vrijeme. Možete koristiti svojstva preciziranja da postavite prilagođenu boju za ivicu svake strane elementa. Ako nije navedena boja obruba, bit će ista kao i boja teksta elementa. Ako element nema tekst, tada će boja ivice biti ista kao i boja teksta roditeljskog elementa. Nije naslijeđen.

boja ivice (bord-top-color, border-right-color, border-bottom-color, border-left-color)
vrijednosti:
transparentan	Postavlja prozirnu boju za okvir. U tom slučaju ostaje širina okvira. Može se koristiti za promjenu boje ivice kada se mišem pređe preko elementa kako bi se izbjeglo pomicanje elementa.
boja	Boja okvira se postavlja pomoću vrijednosti svojstava. (border-color: #cacd58;)
{1,4}	Istovremeni popis četiri različite boje za ivice elementa, samo za svojstvo border-color: (border-color: #cacd58 #5faf8a #b9cea5 #aab238;)
početni	Postavlja vrijednost svojstva na njegovu zadanu vrijednost.
nasljediti	Nasljeđuje vrijednost svojstva od roditeljskog elementa.

Sintaksa

P (boja obruba: #cacd58;)

3. Širina ivice

Širina okvira je određena pomoću jedinica dužine ili ključne riječi. Ako je svojstvo border-style postavljeno na ništa, a granica elementa postavljena na neku širinu, onda u ovaj slučajširina okvira je postavljena na nulu. Nije naslijeđen.

Sintaksa

P (širina ivice: 2px;)

4. Postavljanje okvira sa jednim svojstvom

Svojstvo granice vam omogućava da kombinujete sljedeća svojstva: border-width , border-style , border-color , na primjer:

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

U ovom slučaju, navedena svojstva će se primijeniti na sve ivice elementa istovremeno. Ako bilo koja vrijednost nije specificirana, zadana vrijednost će zauzeti njeno mjesto.

5. Postavljanje okvira za jednu ivicu elementa

U slučaju kada trebate postaviti drugačiji stil ivica elementa, možete ga koristiti kratka napomena za odgovarajuću granicu.
Dolje navedena svojstva kombinuju sljedeća svojstva u jednu deklaraciju: border-width, border-style i border-color. Lista svojstava je navedena u navedenom redoslijedu, dok se jedna ili dvije vrijednosti mogu izostaviti, u kom slučaju će njihove vrijednosti poprimiti zadane vrijednosti.

Stil gornje ivice je postavljen pomoću svojstva border-top, donja granica je border-bottom, lijeva granica je border-left, a desna granica je border-right.

Sintaksa

P (bord-top: 2px puna siva;)

6. Kontura

Svojstvo postavlja vanjsku granicu oko elemenata (tj. izvan normalne granice). Glavna svrha ovog svojstva je da istakne element. Za razliku od svojstva granice, primjena ovog svojstva ne utječe na veličinu ili poziciju elementa, kao obris se prikazuje na vrhu okvira elementa, što zauzvrat može dovesti do preklapanja margine elementa i susjednih područja.

Također, vanjski obris, za razliku od ivice elementa, okružuje element sa svih strana, uokvirujući ga u potpunosti.

Vanjski obris je uvijek pravougaonog oblika i ne prati ivicu okvira koji je postavljen na radijus granica.

Svojstvo outline vam omogućava da kombinujete sljedeća svojstva: boja-oblik, stil-oblik, širina-koture. Ako bilo koja vrijednost nije specificirana, zadana vrijednost će zauzeti njeno mjesto.

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

6.1. Outline stil outline-style

Izgled linije vanjske konture postavljen je na isti način kao i stil okvira elementa. Nije naslijeđen.

Sintaksa

P (stil obrisa: greben;)

6.2. Boja obrisa boja konture

Boja vanjske konture može se specificirati samo kada postavljena vrijednost outline-style . Nije naslijeđen.

Sintaksa

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

6.3. Širina vanjskog obrisa širina obrisa

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

Sintaksa

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

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

Ova tri svojstva (širina, stil i boja ivice) 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 (gornja granica), border-right (desna ivica), border-bottom (donja ivica), border-left (lijeva ivica).

U ovom primjeru, svaka strana bloka ima svoju debljinu ivice, stil i boju.

Razmislite kako CSS pomoć možete kreirati ovakav oblik:

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

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

Razmotrimo svaku od vrijednosti zasebno.

Nekretnina u stilu granice. Border style.

Svojstvo border-style postavlja stil ivice. U CSS-u, u HTML razlike, ivica elementa može biti bilo što osim čvrste. Važeće vrijednosti za stil obruba su:

1. nema - nema granice (podrazumevano).
2. čvrsta - čvrsta ivica.
3. duplo - duplo rub.
4. isprekidana - tačkasta granica.
5. tačkasta - granica sačinjena od niza tačaka.
6. greben - "greben" granica.
7. žlijeb - rubni "žlijeb".
8. umetnuti - umetnuti rub.
9. početak - ekstrudirana granica.

Primjeri kako izgledaju.

bez granice (nema)

čvrsta ivica (puna)

dvostruki obrub (dvostruki)

tačkasta granica (tačkasta)

tačkasta granica (isprekidana)

ivica utora (žlijeb)

granica grebena

uvučena granica (umetnuti)

ekstrudirani obrub (početak)

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

Div blok sa crnim rubom i stilom grebena.

Ivica izgleda kao čvrsta, ali to je zato što je stil grebena kreiran dodavanjem efekta crne sjene, a crni efekat na crnoj ivici nije vidljiv.

Uz pomoć svojstva border-style, stil ivice se može postaviti ne samo za sve strane bloka. Moguće je postaviti više vrijednosti za isto 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 od vrha.

Svojstvo granice širine. Debljina ivice.

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

Kao i svojstvo u stilu granice, svojstvo se također može postaviti na jednu do četiri vrijednosti. Razmotrite 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 - srednja debljina;
• debela - debela ivica;

Debljina ivice: tanka.

Debljina ivice: srednja.

Debljina ivice: debela.

Svojstvo boje granice. Boja ivice.

Mogućnost boje granice se koristi za kontrolu boje ivice. Boje za ovo svojstvo mogu se postaviti bilo kojim od metoda opisanih u članku Boje u CSS-u, naime:

• Heksadecimalni zapis (#ff00aa) za boju.
• RGB format je rgb(255,12,110) . RGBA format za CSS3.
• HSL formati i HSLA za CSS3.
• Naziv boje, na primjer crna (crna). Cijela lista Imena boja su navedena u tabeli 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 zadatak i nacrtajmo figuru:

Evo koda koji crta takav oblik, samo veći:

Zasebno podešavanje vrijednosti za strane

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

• granica-vrh (gornja granica)
• granica desno (desna granica)
• border-bottom (donja granica)
• 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 širinu gornje ivice elementa.
• border-top-style - postavlja stil gornje ivice elementa.

Opcije desne granice (border-desno).

• border-right-color - postavlja boju desne ivice elementa.
• border-right-width - postavlja širinu 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 širinu donje ivice elementa.
• border-bottom-style - postavlja stil donjeg ruba elementa.

Opcije lijevog ruba (border-lijevo).

• border-left-color - postavlja boju lijevog ruba elementa.
• border-left-width - postavlja širinu lijeve ivice elementa.
• border-left-style - postavlja stil lijeve ivice 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 se pojavilo u CSS3 i radi ispravno u svim moderni pretraživači, sa izuzetkom Internet Explorer 8 (i starije verzije).

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

radijus granice svojstva: 15px.

Ako okvir bloka nije postavljen, dolazi do zaokruživanja s pozadinom. Evo primjera zaokruživanja bloka bez obruba, ali s bojom pozadine:

radijus granice svojstva: 15px.

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

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

radijus granice svojstva: 15px.

Iako se ovaj kod može napisati u jednoj deklaraciji: border-radius : 15px 0 15px 0 . Činjenica je da za svojstvo radijusa granice možete postaviti od jedne do četiri vrijednosti. Tabela ispod rezimira pravila koja regulišu takve deklaracije.

Pažljivim proučavanjem ove tabele, možete shvatiti da će najkraći unos za željeni stil biti: border-radius : 15px 0 . Postoje samo dvije vrijednosti.

Malo vežbe

Nacrtajte limun 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;

Svojstvo CSS granice prilagođava se da kreira ivicu objekta, odnosno debljinu ivice, njegovu boju i stil. Ovo svojstvo se široko koristi u HTML-u. Može kreirati razne efekte radi bolje percepcije sadržaja na stranici. Na primjer, dizajnirajte bočnu traku, zaglavlje stranice, meni itd.

1. CSS granična sintaksa

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

• border-width - širina granice. Možete ga postaviti u pikselima (px) ili koristiti standardne vrijednosti tanak, srednji, debeli (razlikuju se samo u širini piksela)
• border-style - stil prikazanog okvira. Može uzeti sljedeće vrijednosti
  • ništa ili skriveno - poništava granicu
  • tačkasti - tačkasti okvir
  • isprekidani - okvir crtice
  • puna - jednostavna linija (najčešće se koristi)
  • duplo - dupli okvir
  • groove - žljebljena 3D ivica
  • greben, umetak, početak - različiti 3D efekti okvira
  • naslijediti - vrijednost roditeljskog elementa se primjenjuje
• border-color - boja ivice. Može se podesiti pomoću specifično ime boje ili u RGB format(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 stila debljine".

2. Primjeri s različitim CSS granicama

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

u stilu granice: isprekidano

u stilu granice: isprekidano

obrubni stil: čvrst

obrubni stil: dupli

rubni stil: žljeb

rubni stil: greben

Border-style: umetnuti

u stilu granice: početak

Četiri različiti okviri

u stilu obruba: tačkasta

u stilu granice: isprekidano

obrubni stil: čvrst

obrubni stil: dupli

rubni stil: žljeb

rubni stil: greben

Border-style: umetnuti

u stilu granice: početak

Četiri različita okvira

2.2. Primjer. Promjena boje ivice pri lebdenju

Ovaj primjer je vrlo jednostavan, ali zanimljiv. Pokazuje kako možete koristiti :hover pseudo-klasu i CSS ivicu za kreiranje jednostavni efekti(na primjer, za meni).

Kada pređete mišem preko bloka, boja okvira će se promijeniti.

Evo kako to izgleda na stranici:

2.3. Primjer. Kako napraviti transparentnu granicu

Okvir može biti providan. Ovaj efekat je rijedak, ali ponekad može biti vrlo koristan za web dizajnere. Za postavljanje prozirnosti potrebno je koristiti postavku boje u obliku RGBA (R, G, B, P) , gdje je posljednji parametar transparentnost je postavljena (stvarni broj od 0,0 do 1,0)

Evo kako to izgleda na stranici:

3. Debljina ivice: svojstvo širine granice

Postavlja debljinu linije. Prethodno smo to tražili pojedinačni opis granica.

CSS sintaksa border-width

granica-širina: tanak | srednje | debelo | značenje;

• tanka - debljina tanke linije
• srednja - prosečna debljina linije
• debljina - debljina debljine linije

Ispod je nekoliko primjera. Najneobičnija stvar će biti različita debljina obruba sa svake strane.

granica širine: tanka

granica širine: srednja

granica širine: debela

Različite debljine na ivicama

Evo kako to izgleda na stranici:

granica širine: tanka

granica širine: srednja

granica širine: debela

Različite debljine na ivicama

4. Kako napraviti obrubni okvir sa samo jednim rubom (borderom)

Svojstvo CSS granice ima izvedena svojstva za postavljanje jednostranih granica na elementu:

• border-top - za postavljanje gornje granice (gornje granice)
• border-bottom - za postavljanje donje granice (donje granice)
• border-right - za postavljanje granice na desnoj strani (desna granica)
• border-left - za postavljanje granice na lijevoj (lijevoj ivici)

Ove granice se mogu kombinovati, tj. napišite okvir za svaki smjer. Sintaksa je potpuno ista kao i za obrub.

Tu su i nekretnine

• border-top-color - postavite boju gornjeg ruba
• border-top-style - postaviti stil gornje granice
• border-top-width - postavite širinu gornjeg ruba
• itd. za svaki pravac

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

/* Opis dva identična stila: */

4.1. Primjer. Prekrasan okvir za isticanje citata

Primjer okvira citata

Evo kako to izgleda na stranici:

Primjer okvira citata

Bilješka
Možete postaviti zasebnu granicu za svaku stranu.

5. Kako napraviti više ivica na html elementu

Ponekad morate napraviti više ivica. Dajemo primjer

5.1. Prva opcija s više ivica

Evo kako to izgleda na stranici:

Postoji drugi put kroz preklapanje senki.

5.2. Preklapanje senki za kreiranje više ivica

Evo kako to izgleda na stranici:

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

Za stvaranje prelepi okviri koristiti imovinu css granica-radijus(dostupno samo u CSS3). Pomoću njega možete napraviti zaobljene uglove, što stvara potpuno drugačiji izgled. Na primjer

7. CSS uvučena linija

Reljefne linije mogu izgledati spektakularno tamna pozadina, što nije prikladno za svaku lokaciju.

---

Evo kako to izgleda na stranici:

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

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

Jedna zanimljiva primena svojstva CSS3 box-shadow je kreiranje dupli okvir oko elementa. Veoma zanimljiv efekat za stilizovanje stranice, ali će raditi samo u novim verzijama pretraživača koji podržavaju box-shadow.

Međutim, postoji nekoliko drugih metoda za stvaranje takvog efekta. I očigledna upotreba pozadinska slika je veoma daleko od idealnog.

IN ovu lekciju pet metoda je predviđeno za kreiranje dvostruke ivice oko elementa. I samo jedan od njih zahteva sliku, a svi ostali koriste čisti CSS kod sa odličnom podrškom za pretraživač.

Metoda 1: granica i obris

Ova metoda radi samo u pretraživačima koji podržavaju svojstvo outline (svi osim IE6/7). Elementu dodajete svojstva ivice i obrisa.

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

Razlog zašto ova metoda radi je taj što se obris uvijek crta na vanjskoj strani pravokutnika. Problem sa svojstvom outline dolazi do izražaja kada se koriste plutajući elementi, jer se obris preklapa sa susjednim elementima.

Metoda 2: pseudo element

Ova metoda zahtijeva apsolutno pozicioniranje okvir:

Dva ( granica: čvrsta 6px #fff; pozicija: relativna; z-indeks: 1; ) .two:before ( sadržaj: ""; prikaz: blok; pozicija: apsolutna; vrh: -12px; lijevo: -12px; granica: solid 6px #888; širina: 312px; padding-bottom: 12px; min-height: 100%; z-index: 10; )

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

Metoda 3: senka

Većina najbolja metoda, budući da je potrebna samo jedna linija koda za postavljanje svojstva box-shadow.

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

Dvije senke se koriste da bi se pojavila dvostruka ivica. Oni su odvojeni zarezima. Zamućenje je postavljeno na 0. Pošto se druga sjena preklapa s prvom, ona ima dvostruko veću širinu. Ključni trenutak- upotreba neprozirnih boja, čime se stvara jasna granica između okvira.

Kao i svojstvo outline, senka okvira nema uticaja na susjedni elementi i može ih pokriti. Stoga je potrebno postaviti polje za formaciju izgled kompozicije.

Naravno, podrška za svojstvo box-shadow ograničena je na novije pretraživače.

Metoda 4: Dodatni element div

IN ovu metodu korišteno vanjski element