Crearea granițelor în CSS. proprietate de frontieră. Crearea chenarelor cu CSS Css chenar dublu

Border-image este o proprietate care vă permite să setați o imagine de fundal pentru chenarul unui element. Proprietatea umple cadrul cu imaginea specificată, distribuind părți ale imaginii în așa fel încât părțile de colț să fie în colțurile cadrului, iar spațiile dintre ele să fie umplute cu restul imaginii.

Această proprietate face ușor să faci lucruri incredibile care anterior necesitau de la 3 până la 8 imagini și manipulări de marcare.

Actualizați: Firefox funcționează de la versiunea 29 a .

Dimensiunea imaginii este egală cu lățimea cadrului. Culoarea și stilul chenarului sunt ignorate.

Dacă setați doar border-image-source , imaginea va umple colțurile cu ea însăși, neștiind ce să facă în continuare:

Chenar: 80px solid transparent; imagine-chenar: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

chenar-imagine-slice

O proprietate importantă care determină dimensiunea piesei din imagine care va umple colțurile cadrului. Părțile rămase vor fi folosite pentru a umple spațiul dintre colțuri conform algoritmului specificat în border-image-repeat .

Valori posibile:

<проценты>- sunt calculate în raport cu dimensiunea imaginii. Orizontală în raport cu lățimea, verticală în raport cu înălțimea.<числа>- pixeli (pentru bitmap) sau coordonate (pentru vector). Unitățile de măsură nu sunt specificate. completati- cuvânt cheie, completând valorile anterioare. Dacă este setată, imaginea nu este tăiată de marginea interioară a cadrului, ci umple și zona din interiorul cadrului. Foarte util pentru rame rotunjite.

Pentru a defini valori pentru fiecare parte, pot fi specificate mai multe valori separate printr-un spațiu.

Suma valorilor laturilor opuse trebuie să fie mai mică decât dimensiunea imaginii, altfel nu va fi nimic care să umple spațiul dintre colțuri.

Chenar: 80px solid transparent; imagine-chenar: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); chenar-imagine-slice: 100;

chenar-imagine-repetare

Proprietatea determină modul în care golurile dintre colțuri vor fi umplute.

Valori posibile: stretch - întinde zona de umplere a imaginii. Valoare implicită; repetă - repetă zona de umplere, în timp ce îmbinările cu imaginea colțului sunt vizibile; rotund - umple golul dintre colțuri. Este posibil să existe o cusătură în mijlocul lateral. Cea mai precisă acțiune. spațiu - acționează similar cu repetarea. Nu am găsit nicio diferență.

Puteți seta două valori simultan, prima va fi responsabilă pentru comportamentul imaginii în cadrele superioare și inferioare, a doua - pentru stânga și dreapta.

Imagine-chenar: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); chenar-imagine-slice: 100; border-image-repeat: repetare;

Stânga se repetă, dreapta este rotundă.

Dacă cadrul este complex și părțile laterale nu se potrivesc bine între ele, întinderea va funcționa mai corect, iată un exemplu.

chenar-imagine-lățime

chenar-imagine-lățime

Proprietatea controlează lățimea părții vizibile a cadrului, o scalează. Dacă această valoare este mai mare decât lățimea border-width , imaginea de chenar se va accesa cu crawlere sub conținut, chiar dacă proprietatea de umplere nu este setată.

Valori posibile:<длина>- valori în px sau em;<%>- valori procentuale raportate la dimensiunea imaginii;<числа>- valoare numerică pentru a înmulți automat lățimea chenarului - cuvânt cheie. Dacă este dat, valoarea este egală cu border-image-slice corespunzătoare. Dacă nu există o dimensiune adecvată, se folosește valoarea lățimii marginii, iar imaginea umple întregul colț al cadrului, târându-se sub conținut. Funcționează puțin ciudat.

Chenar: 60px solid transparent; imagine-chenar: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); chenar-imagine-slice: 80; chenar-imagine-repetare: rotund; lățime-imagine-chenar: 160px;

În dreapta este un cadru cu margine-image-width . În exemplul din stânga, puteți vedea cum imaginea a fost tăiată de marginile interioare ale cadrului. Cadrul din dreapta s-a târât sub conținut din cauza lățimii crescute.

marginea-imagine-început

O proprietate interesantă care vă permite să mutați cadrul în afara elementului. Valorile negative nu sunt acceptate.

Valori posibile:<длина>- valori în px sau em;<числа>- valoarea numerică cu care se înmulțește lățimea chenarului.

Chenar: 60px solid transparent; imagine-chenar: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); chenar-imagine-slice: 120; chenar-imagine-repetare: rotund; margine-imagine-început: 60px 10px 50px 120px;

În dreapta este un exemplu cu border-image-outset . Această proprietate nu afectează dimensiunile elementului, iar chenarul se poate suprapune cu elemente adiacente.

Proprietate css – « frontieră”, vă permite să setați grosimea, culoarea și tipul liniei în jurul perimetrului din jurul elementului. Parametrii acestei proprietăți pot fi scriși pe o singură linie, separați prin spații și în orice ordine.

• - grosimea liniei de un pixel
• - linie solida
• - Culoare alba
• - culoare neagră
• - culoare gri

Chenar element solid

marginea elementului punctat

Chenar cu elemente punctate

Linie dublă chenar element

Proprietatea secțiunilor individuale ale graniței

Cadru ondulat deprimat în volum

Cadru ondulat convex în volum

Cadru deprimat volumetric

Cadru volumetric convex

Lecții / CSS /

Lecția 7

Aproape fiecare site folosește o proprietate care creează o chenar în jurul unui element. Este necesar fie pentru butoane, fie pentru blocuri cu text. Pentru a crea un chenar, un element din CSS are două proprietăți: chenar și contur. Să le luăm în considerare.

frontieră

Această proprietate este necesară pentru a seta un cadru în jurul elementului, indică marginea acestuia în documentul web, lățimea cadrului este luată în considerare la poziționarea elementului. Are 3 valori - culoare, grosime și tip de cadru.

Sintaxa pentru proprietatea border este următoarea:

chenar: Lățime Tip Culoare;
De asemenea, puteți alege o ordine diferită pentru specificarea valorilor proprietăților, dar principalul lucru este printr-un spațiu.

Grosimea (lățimea) cadrului trebuie specificată în pixeli (px) sau procente (%).
Culoarea poate fi specificată fie în format RGB (Red Green Blue), fie în cod HTML HEX.

Mai jos sunt TIPURI DE LINII cu numele lor:

Cum se stabilesc chenarele unui element? O facem astfel:

#bloc(
chenar:3px solid #0085ss; /* setează linia să fie albastră cu grosimea de 3 pixeli */
}

Dacă doriți să instalați unul, doi sau trei cadru pe o parte, apoi specificați după cum urmează:

vârf de frontieră- cadru superior
marginea-de jos- cadru de jos
granița-stânga- rama in stanga;
granita-dreapta- rama in dreapta;

Bloc (
chenar-dreapta: 3px solid #0085cc;
chenar-jos: 2px punctat #0085cc;
}

Dacă dorești îndepărtați cadrele element în CSS, apoi scrieți proprietate de frontieră-nici unul

gol(
hotar: niciunul /* elementul cu clasa goală nu va avea chenar */
}

contur

Outline este o proprietate necesară pentru a seta marginea exterioară a unui element.

Există două diferențe față de graniță:
În primul rând, linia specificată în contur NU va afecta poziția blocului în sine, lățimea și înălțimea acestuia.
În al doilea rând, nu există posibilitatea de a instala un cadru dintr-o anumită parte.
Sintaxa este aceeași cu border.

contur: 2px punctat #0085cc; /* chenar 2 px punctat albastru */
Pentru contur, precum și pentru chenar, puteți elimina chenarele scriind niciunul:

Vă mulțumim pentru atenție!

Articolul anterior
Lecția 6

Chenarele elementelor.

Umplutură și margini în CSS. Ce este marginea și umplutura? Articolul următor
Lecția 8. Cum să setați culoarea textului și fundalul unui element în CSS?

Comentarii la articol (vk.com)

frontieră

Suport pentru browser

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

Descriere

Proprietatea CSS vă permite să setați lățimea, stilul și culoarea pentru chenarul blocului în același timp. Chenarul blocului este o linie/cadru simplă care înconjoară blocul pe toate părțile. Trebuie avut în vedere că atunci când adăugați un cadru, acesta va afecta dimensiunea totală a blocului.

Valorile sunt separate printr-un spațiu și pot fi în orice ordine, browserul va determina care dintre ele se potrivește cu parametrul dorit. Nu este necesar să se specifice toate cele trei valori, lățimea și/sau culoarea pot fi omise, caz în care valoarea care este setată pentru proprietatea implicită va fi folosită în locul valorii lipsă, adică. dacă de exemplu nu este specificată lățimea, atunci valoarea implicită a proprietății va fi utilizată. Tabelul de sub sintaxă arată valorile cărora pot fi utilizate proprietăți.

Notă: Pentru a seta chenare numai pe anumite laturi ale unui element, utilizați următoarele proprietăți: chenar-sus, chenar-jos, chenar-stânga, chenar-dreapta.

Sfat: De regulă, atunci când utilizați un chenar, trebuie să adăugați umplutură.

Proprietate CSS: chenar

Acestea adaugă spațiu alb între chenarul blocului și conținutul acestuia: text, imagini sau etichete copil. De obicei, chenarul este afișat aproape de conținutul elementului, acest lucru este util doar dacă trebuie să setați un chenar în jurul imaginii.

Sintaxă

border: border-width border-style border-color|moștenire;

Valorile proprietatii

Exemplu

Există ceva text aici.

Rezultat acest exempluîn fereastra browserului:

Cum să setați culoarea, stilul și dimensiunea chenarului în casete.

În limbajele de marcare, chenarul( frontieră), au doar tabele, poze si rame, in unele cazuri se poate seta culoarea chenarului si atat.

atribut de frontieră

Foile de stil în cascadă ne oferă mai multe opțiuni, dar pe primul loc.

În CSS, putem controla lățimea chenarului (borderului) cu lățimea graniței, și pentru a fi mai precis, putem controla grosimea fiecărei părți separat:
margine-sus-latime- grosimea marginii superioare
bordura-dreapta-latime- grosimea bordurului drept
chenar-latime-jos- grosimea marginii inferioare
chenar-stânga-lățime- grosimea marginii stângi
Dar poate fi și scurtat:
P(lățime chenar:sus dreapta jos stânga;)(sus dreapta jos stanga).
Lățimea chenarului poate fi setată:
cifre DIV(border-width:5px), de la zero la infinit, adică pozitiv.
subţire- chenar subțire, DIV(border-width:thin)
mediu- chenar mijlociu, DIV(border-width:medium)
gros- chenar gros, DIV(border-width:gros)
Cu numere este clar, dar cu aceste valori totul depinde de browser, dar totuși subţire<= medium <= thick .

De asemenea, putem controla culoarea chenarului cu culoarea chenarului sau pentru a fi mai precis culoarea fiecărei părți:
chenar-top-culoare culoarea marginii superioare
chenar-dreapta-culoare culoarea marginii drepte;
culoarea-fond-chenar culoarea marginii inferioare;
chenar-stânga-culoare culoarea chenarului pe partea stângă.
Valoarea culorii este setată ca pentru culoare, adică una din cele 16 culori: acva, negru, albastru, fucsia, gri, verde, lime, maro, bleumarin, măsline, violet, roșu, argintiu, verdeață, alb sau galben, puteți seta și culorile: culoare:#000000, culoare:#AF0 , culoare:rgb(255,0,0) sau culoare:rgb (100%, 0%, 0%).
Indiferent de schema de culori pe care o alegeți, browserele o vor traduce în continuare culoare:rgb(255,0,0). de exemplu culoare: var = culoare:#00ff00 = culoare:#0F0 = culoare:rgb (0%, 100%, 0%), dar nu contează pentru browser culoare:rgb(0,255,0), adică va calcula această valoare.

Dacă grosimea și culoarea chenarului pot fi controlate și prin HTML, atunci stilul ( stilul de chenar) doar CSS!!!
Stilul poate fi controlat de fiecare parte separat:
stil bordur-top stilul chenarului superior;
chenar-dreapta-stil stilul marginii drepte;
chenar-de jos-stil stilul marginii de jos;
border-stânga-stil stil de chenar pe partea stângă.
Acum luați în considerare valorile stilurilor:
1)stil de chenar: niciunul- Aceasta este valoarea implicită, similară cu border-width:0.
2)border-style:ascuns- La fel, cu excepția tabelelor (tabelului), pe care le vom lua în considerare mai târziu.
3)stil de chenar: punctat- Un chenar de puncte.
4)stil bordur: punctat— Chenar dintr-o linie punctată.
5)stil de chenar: solid- Linie continuă, de ex. ca în HTML.
6)stil de chenar: dublu- Un chenar cu o linie dublă continuă, aici aveți nevoie de o grosime (border-width) de cel puțin 3 pixeli.
7)border-style:canelură- Chenarul arată ca și cum ar fi fost tăiat în pânză.
8)border-style:crestă— Chenarul pare să iasă din pânză.
9)stil de chenar: inserție- Întreaga cutie arată ca presată în pânză.
10)border-style:început- Opusul celui precedent.
Unele browsere pot ignora valorile punctate, întrerupte, duble, groove, creastă, inset și start și le pot scoate ca solide, de ex. granita obisnuita.

Desigur, toate acestea sunt adevărate, dar toate exemplele de mai sus sunt doar principiul de funcționare și nu un mecanism.
Proprietatea regulilor frontieră implică (chenar: dimensiune stil culoare;), această regulă este executată dacă toate cele trei valori sunt prezente și numai în această ordine, de exemplu H1 (chenar: 5px dublu roșu;), dar pot exista excepții dacă aceste valori sunt furnizate de limbaje de marcare, de exemplu, pentru un tabel TABLE (chenar: 2px), adică este dată o singură valoare.

Pentru a gestiona nu întreaga bordură, ci fiecare parte separat, există reguli:
(chenar-sus: culoare stil dimensiune;) Control bord superior;
(chenar-dreapta: culoare stil dimensiune;) Control bordura pe dreapta;
(chenar-jos: culoare stil dimensiune;) Control bord inferior;
(chenar-stânga: culoare stil dimensiune ;) Comandă borduri pe stânga.
Aceste reguli pot fi folosite individual sau toate împreună.

Excepția este această regulă:
H1(
chenar: 4px verde continuu;
}
Chestia este că în CSS ultima regulă are cea mai mare prioritate, în acest caz proprietatea border conține border-left și de aceea regula border-left va fi ignorată, chiar așa:
H1(
chenar: 4px verde continuu;
chenar-stânga: 2px dublu roșu;
}
În primul rând, am stabilit regulile pentru întreaga bordură și apoi pentru secțiuni individuale.

Am totul despre chenare pentru elemente, cu excepția faptului că vom lua în considerare unele proprietăți când ajungem la tabele și alte excepții.

css: chenar. Chenarele elementelor.

Borduri CSS3

Borduri CSS3

Cu CSS3, puteți crea chenare rotunjite, adăugați umbre containerelor și utilizați o imagine ca chenar, fără a fi nevoie de un program de design precum Photoshop.

În această lecție, veți afla despre următoarele proprietăți de frontieră:

• hotar-raza
• umbra cutie
• chenar-imagine

Suport pentru browser

Proprietate	Suport pentru browser
hotar-raza
umbra cutie
chenar-imagine

Internet Explorer 9 acceptă unele dintre noile proprietăți de chenar.

Firefox necesită prefixul -moz- pentru imaginea de margine.

Chrome și Safari necesită prefixul -webkit- pentru imaginea de margine.

Opera necesită -o- pentru imaginea de chenar.

Safari necesită și prefixul -webkit- pentru box-shadow.

Opera acceptă noi proprietăți de frontieră.

CSS3 Colțuri rotunjite

Adăugarea colțurilor rotunjite în CSS2 a fost dificilă. A trebuit să folosim imagini diferite pentru fiecare colț.

În CSS3, crearea colțurilor rotunjite este ușoară.

În CSS3, proprietatea border-radius este folosită pentru a crea colțuri rotunjite:

Acest bloc are colțurile rotunjite!

CSS3 Container Shadow

În CSS3, proprietatea box-shadow este folosită pentru a adăuga o umbră casetelor:

CSS3 Border-Imagine

Cu proprietatea CSS3 border-image, puteți utiliza o imagine pentru a crea o chenar:

Proprietatea border-image vă permite să specificați un chenar de imagine!

Imaginea originală folosită pentru a crea chenarul este a ta:

Noi proprietăți de frontieră

atribut de frontieră

atribut de frontieră, etichetă

, folosit pentru a specifica grosimea chenarului din jurul tabelului.

Borduri HTML

Este acceptabil să folosiți chenar fără valori, atunci grosimea chenarului va fi egală cu un pixel. În mod implicit, cadrul este afișat cu efecte 3D, dar dacă aplicați suplimentar atributul de fundal, cadrul va deveni „plat”.

În plus, dacă atributul chenar are o valoare diferită de zero, atunci browserele afișează și chenare subțiri în jurul celulelor în sine. Afișarea acestor margini poate fi controlată folosind atributul reguli.

Valori

Valoarea atributului poate fi orice număr nenegativ care specifică dimensiunea în pixeli.

Valoare implicită: 0.

Sintaxă

Atribut necesar: niciunul.

Exemplu HTML: aplicarea atributului Border

Exemplu de rezultat

Rezultat. Aplicarea atributului border.

Vlad Merjevici

Cu CSS, puteți adăuga o chenar la un element în mai multe moduri. Practic, desigur, este folosită proprietatea de frontieră, ca cea mai versatilă, precum și contur și, în mod surprinzător, box-shadow , a cărei sarcină principală este de a crea o umbră. Să aruncăm o privire la aceste metode și diferențele lor.

proprietatea conturului

Cea mai simplă proprietate pentru crearea cadrelor. Are aceiași parametri ca și border , dar diferă semnificativ de acesta în unele detalii:

• conturul este trasat în jurul elementului (chenar în interior);
• conturul nu afectează dimensiunea elementului (chenarul este adăugat la lățimea și înălțimea elementului);
• conturul poate fi setat numai în jurul întregului element, nu pe părțile individuale (chenarul poate fi folosit pe orice parte sau pe toate odată);
• conturul nu este afectat de raza de rotunjire specificată de proprietatea border-radius (afectează chenarul).

Se pune întrebarea - în ce cazuri este nevoie de contur, când rolul său, în ciuda diferențelor enumerate, este complet preluat de graniță? Nu există atât de multe situații, dar apar:

• crearea de rame complexe multicolore;
• adăugarea unui cadru la un element atunci când treceți cu cursorul peste acesta cu cursorul mouse-ului;
• Ascunderea cadrului adăugat automat de browser pentru unele elemente atunci când primește focus;
• pentru contur, puteți seta distanța de la marginea unui element la margine folosind proprietatea outline-offset, pentru a crea un .

Rame multicolore

Trebuie înțeles că conturul nu înlocuiește în niciun fel granița și poate exista cu el, așa cum se arată în exemplul 1.

Exemplul 1: Creați un cadru

În acest exemplu, în jurul elementului este adăugată un chenar negru, care este separat de fundal printr-un chenar alb (Fig. 1).

Orez. 1. Chenar în jurul elementului

Cadru când se utilizează: hover

Adăugarea unui chenar peste chenar mărește lățimea elementului, ceea ce este destul de vizibil atunci când combină chenar și pseudo-clasa :hover. Există două moduri de a „câștiga”. Cel mai simplu este să înlocuiți chenarul cu un contur , despre care știm că nu are niciun efect asupra dimensiunii elementului (exemplul 2).

Exemplul 2: Cadrul la hover

conturul nu este întotdeauna potrivit, fie și doar pentru că nu este afectat de colțurile rotunjite. A doua metodă este potrivită aici - adăugați un chenar invizibil sau un chenar care se potrivește cu culoarea de fundal, apoi modificați parametrii acestuia la trecerea cu mouse-ul (exemplul 3). Atunci nu va avea loc nicio deplasare a elementului, deoarece cadrul este deja acolo inițial. Dar amintiți-vă întotdeauna că lățimea elementului este suma valorilor lățimii, marginea din stânga și chenarul din dreapta. Același lucru este valabil și cu înălțimea.

Exemplul 3: Cadrul la hover

Chenar în jurul câmpurilor de formular

În unele browsere (Chrome, Safari, versiuni recente de Opera), un mic chenar colorat este afișat în jurul câmpurilor de formular atunci când acestea primesc focalizare (Fig. 2). Pentru a-l elimina, este suficient să adăugați valoarea none la proprietatea contur din stiluri, așa cum se arată în exemplul 4.

Orez. 2. Încadrați în jurul câmpurilor

Exemplul 4. Scoateți cadrul

Cadre prin box-shadow

Deși proprietatea box-shadow este destinată să adauge o umbră în jurul unui element, poate fi folosită și pentru a crea chenare și cele care nu pot fi realizate cu bordur sau outline . Acest lucru se datorează faptului că numărul de umbre poate fi nelimitat, ai căror parametri sunt enumerați separați prin virgule.

Pentru a obține un cadru, primii trei parametri ar trebui setați la zero, ei sunt responsabili de poziția umbrei și de estomparea acesteia. Al patrulea parametru în acest caz este responsabil pentru grosimea chenarului, iar al cincilea setează culoarea cadrului. Pentru al doilea cadru, al patrulea parametru este egal cu suma grosimilor celor două rame.

Exemplul 4 arată cum să adăugați două casete și un chenar la dreapta folosind o singură proprietate box-shadow.

Exemplul 4: Utilizarea box-shadow

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 3. Cadre create de proprietatea box-shadow

O aplicație interesantă a proprietății CSS3 box-shadow este crearea unui chenar dublu în jurul unui element. Un efect foarte interesant pentru decorarea paginii, dar va funcționa doar în versiunile noi de browsere care acceptă box-shadow .

Cu toate acestea, există mai multe alte metode de a crea un astfel de efect. Mai mult decât atât, utilizarea evidentă a unei imagini de fundal este foarte departe de a fi ideală.

Acest tutorial prezintă cinci metode pentru crearea unui chenar dublu în jurul unui element. Și doar unul dintre ele necesită o imagine, iar toate celelalte folosesc cod CSS pur cu suport excelent pentru browser.

Metoda 1: chenar și contur

Această metodă funcționează numai în browserele care acceptă proprietatea outline (toate cu excepția IE6/7). Adăugați atât proprietățile de chenar, cât și de contur elementului.

Unul (chenar: solid 6px #fff; conturul: solid 6px #888; )

Motivul pentru care această metodă funcționează este că conturul desenează întotdeauna în exteriorul dreptunghiului. Problema cu proprietatea contur intră în joc atunci când se utilizează elemente plutitoare, deoarece conturul se suprapune cu elementele învecinate.

Metoda 2: pseudo element

Această metodă necesită poziționarea absolută a cadrului:

Două ( chenar: solid 6px #fff; poziție: relativ; z-index: 1; ) .two:before ( conținut: ""; afișare: bloc; poziție: absolut; sus: -12px; stânga: -12px; chenar: solid 6px #888; lățime: 312px; umplutură de jos: 12px; înălțime minimă: 100%; z-index: 10; )

Punctele cheie sunt setarea proprietății z-index (astfel încât pseudo-elementul să se suprapună cu conținutul), poziționarea și valoarea minimă a înălțimii. Ultima proprietate păstrează elasticitatea cadrului.

Metoda 3: Umbra

Cea mai bună metodă, deoarece este nevoie de o singură linie de cod pentru a seta proprietatea box-shadow.

Trei (cutie-umbră: 0 0 0 6px #fff, 0 0 0 12px #888; )

Două umbre sunt folosite pentru a face să apară chenarul dublu. Sunt separate prin virgule. Neclaritatea este setată la 0. Deoarece a doua umbră se suprapune pe prima, are o lățime de două ori mai mare. Punctul cheie este utilizarea culorilor opace, care creează o graniță clară între rame.

La fel ca proprietatea outline, box-shadow nu afectează elementele adiacente și le poate suprapune. Prin urmare, este necesar să se stabilească un câmp pentru formarea aspectului compoziției.

Desigur, suportul pentru proprietatea box-shadow este limitat la browserele mai noi.

Metoda 4: element div suplimentar

Această metodă folosește un element extern