Mihai 2016-06-11 1 HTML și CSS 0

Cum se face chenarul dublu în css?

Bună ziua tuturor. Știi cum să dublezi chenarul în css? Dacă nu, vă rugăm să citiți această mică notă. Ideea este că nu poți face asta cu chenarul obișnuit, aici trebuie să mergi în altă direcție.

Dacă specificați o chenar folosind proprietatea chenar, puteți specifica doar una. Dar de foarte multe ori un design poate necesita mai multe cadre. În acest caz, ar trebui să utilizați un pseudo-cadru - o umbră.

Bord dublu cu casetă-umbră

În general, dacă doriți să aflați mai multe despre umbra în css, atunci vă sfătuiesc să citiți despre subiectul relevant. În acest articol, nu voi explica în detaliu sintaxa proprietății, ci pur și simplu vă voi arăta un truc despre cum să creați un chenar dublu. Deci, să creăm un bloc obișnuit, căruia îi voi aloca unele stiluri. Blocul poate fi orice și cu orice conținut. În cazul meu, este un simplu div, așa că nici nu voi afișa codul html. Și iată stilurile:

Div (
fundal: # E0D8A3;
latime: 180px;
înălțime: 110px;
umplutură: 12px;
}

Ei bine, un exemplu tipic de design bloc.
Acum să creăm un chenar dublu folosind mai multe umbre. Voi adăuga următoarea proprietate la stilurile pentru bloc:

Box-shadow: 0 0 0 1px # 000, 0 0 0 10px # E0D8A3;

Așa arată:

După cum puteți vedea, a ieșit destul de frumos. Există doar 5 parametri în box-shadow. Prima este deplasarea orizontală a umbrei, a doua este verticală. Al treilea și al patrulea parametru sunt estomparea și întinderea. După cum puteți vedea, nu ne atingem deloc de primele trei. Nu avem nevoie de estompare pentru că vrem o umbră ascuțită. După cum puteți vedea, am prescris al patrulea parametru - întinderea. Determină cât de mult va fi umbra mai mare decât elementul de care este atașată.

În mod implicit, totul arată astfel - umbra are aceeași dimensiune cu elementul și se află clar sub ea. Dacă schimbați întinderea, atunci umbra începe să iasă dincolo de element. Acesta este modul în care puteți crea chenare, exact la fel ca și cu proprietatea border. Ei bine, cu al cincilea parametru, cred că totul este clar - aceasta este culoarea umbrei.

După cum puteți vedea, am enumerat doar parametrii pentru fiecare umbră nouă, despărțiți prin virgule. Cred că ați ghicit deja că puteți crea o chenar triplă etc., în același mod. Nu există restricții aici. De fapt, în ceea ce mă privește, întrebarea este închisă, dar dacă aveți întrebări, le puteți scrie în comentarii.

Doar un moment al atenției tale: Cu toții dorim să ne găzduim site-urile pe o găzduire de încredere. Am analizat sute de găzduiri și am găsit-o pe cea mai bună - HostIQ Există sute de recenzii pozitive despre el online, ratingul mediu al utilizatorilor este de 4,8 din 5. Fie ca site-urile tale să fie fericite.

Vlad Merjevici

Cu CSS, puteți adăuga o chenar la un element în mai multe moduri. Practic, desigur, proprietatea de frontieră este folosită ca cea mai universală, precum și contur și, în mod surprinzător, cutie-umbră, a cărei sarcină principală este de a crea o umbră. În continuare, vom lua în considerare aceste metode și diferențele dintre ele.

Proprietatea conturului

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

• conturul este trasat în jurul elementului (chenarul este în interior);
• conturul nu afectează dimensiunile 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 stabilită de proprietatea border-radius (granița este afectată).

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

• crearea de rame complexe multicolore;
• adăugarea unui chenar la un element atunci când treceți cu mouse-ul peste acesta cu cursorul mouse-ului;
• ascunderea cadrului adăugat de browser în mod automat pentru unele elemente atunci când primesc focalizare;
• pentru un contur, puteți seta distanța de la marginea unui element la cadru folosind proprietatea outline-offset pentru a crea.

Rame multicolore

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

Exemplul 1. Crearea unui 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. Încadrați în jurul elementului

Încadrare când se utilizează: hover

Adăugarea unui chenar prin chenar mărește lățimea elementului, ceea ce este destul de vizibil atunci când combinați chenar și pseudoclasa: hover. Există două moduri de a „câștiga” asta. Cel mai simplu lucru este să înlocuiți chenar cu contur, despre care știm că nu are niciun efect asupra dimensiunilor elementului (exemplul 2).

Exemplul 2. Chenar la hover

conturul nu este întotdeauna potrivit, fie și numai pentru că rotunjirea colțurilor nu îl afectează. Aici a doua metodă este potrivită - adăugați un cadru sau un cadru invizibil care se potrivește cu culoarea de fundal și apoi modificați parametrii acestuia la trecerea cu mouse-ul (exemplul 3). Atunci nu va avea loc nicio deplasare a elementului, deoarece cadrul există deja de la început. Dar amintiți-vă întotdeauna că lățimea elementului este suma valorilor lățimii, marginea din stânga și chenarul din dreapta. Situația este similară cu înălțimea.

Exemplul 3. Cadru pe hover

Chenar în jurul câmpurilor de formular

În unele browsere (Chrome, Safari, cele mai recente versiuni de Opera), un mic chenar colorat apare în jurul câmpurilor de formular atunci când acestea primesc focalizare (Figura 2). Pentru a o elimina, trebuie doar să adăugați valoarea none la proprietatea contur în stiluri, așa cum se arată în exemplul 4.

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

Exemplul 4. Scoaterea cadrului

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 margini care nu pot fi realizate cu un chenar sau un contur. 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 cadrul, 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 marginii, iar al cincilea setează culoarea marginii. Pentru al doilea cadru, al patrulea parametru este suma grosimilor celor două rame.

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

Exemplul 4. Utilizarea box-shadow

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 3. Cadre create de proprietatea box-shadow

Descriere

Proprietatea chenar generică vă permite să setați grosimea, stilul și culoarea chenarului în jurul unui element în același timp. Valorile pot merge în orice ordine, separate printr-un spațiu, browserul va determina care dintre ele corespunde proprietății dorite. Pentru a seta chenarul numai pe anumite laturi ale unui element, utilizați proprietățile chenar-sus, chenar-jos, chenar-stânga, chenar-dreapta.

Sintaxă

Valorile

Valoarea lățimii chenarului determină grosimea chenarului. Sunt furnizate mai multe valori de tip chenar pentru a-i controla aspectul. Numele lor și rezultatul acțiunii sunt prezentate în Fig. 1.

Fig. 1. Stiluri de cadru

border-color setează culoarea chenarului, valoarea poate fi în orice format CSS valid.

moștenire moștenește valoarea părintelui.

HTML5 CSS2.1 IE Cr Op Sa Fx

Acest exemplu adaugă un chenar dublu în jurul stratului. Rezultatul este prezentat în Fig. 2.

Orez. 2. Aplicarea proprietății de frontieră

Model de obiect

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

Browsere

Internet Explorer până la versiunea 6 inclusiv afișează punctat ca punct cu o grosime a marginii de 1 px. Dacă grosimea este de 2 px sau mai mult, valoarea punctată funcționează corect. Această eroare este remediată în IE7, dar numai pentru toate marginile de 1px. Dacă unul dintre marginile casetei este de 2 px sau mai mult, atunci în IE7 valoarea punctată devine punctată.

Internet Explorer până la versiunea 7.0 inclusiv nu acceptă valoarea de moștenire.

Stilul de chenar poate varia ușor de la un browser la altul când se utilizează valorile groove, ridge, inset sau start.

Descriere

Setează stilul chenarului în jurul elementului. Este permisă setarea stilurilor individuale pentru diferite părți ale unui element.

Sintaxă

stil de chenar: (1,4) | moşteni

Valorile

Sunt furnizate mai multe valori ale proprietăților în stil de chenar pentru a controla aspectul graniței. Aspectul depinde de browserul utilizat și de grosimea specificată a chenarului. Masa 1 arată numele stilurilor și cadrul rezultat la diferite valori de grosime - 1, 3, 5 și 7 pixeli.

Pe lângă valorile enumerate în tabel, sunt utilizate următoarele cuvinte cheie.

Nici unul Nu afișează chenarul, iar lățimea acesteia (lățime-chenar) este setată la zero. hidden Are același efect ca niciunul, cu excepția aplicării stilului de chenar la celulele tabelului care au proprietatea de restrângere a marginilor setată la restrângere. În acest caz, chenarul din jurul celulei nu va fi afișat deloc. inherit Moștenește valoarea de la părinte.

Este permisă utilizarea unei, două, trei sau patru valori, separându-le cu un spațiu. Efectul depinde de cantitate și este indicat în tabel. 2.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Aplicarea proprietății de tip border

Model de obiect

document.getElementById ("elementID") .style.borderStyle

Browsere

Internet Explorer până la versiunea 6 inclusiv afișează punctat ca punct cu o grosime a marginii de 1 px. Dacă grosimea este de 2 px sau mai mult, valoarea punctată funcționează corect. Această eroare este remediată în IE7, dar numai pentru toate marginile de 1px. Dacă unul dintre marginile casetei este de 2 px sau mai mult, atunci în IE7 valoarea punctată devine punctată.

Internet Explorer până la versiunea 7.0 inclusiv nu acceptă valori ascunse și moștenite.

Stilul de chenar poate varia ușor de la un browser la altul când se utilizează valorile groove, ridge, inset sau start.

Am studiat proprietatea pentru decorarea textului și a fontului, acum este timpul să trecem la alte elemente. În acest tutorial ne vom uita la crearea cadrelor folosind CSS... Această proprietate este folosită destul de des, așa că ar trebui să i se acorde puțin mai multă atenție.

Și așa, să presupunem că trebuie făcută o chenar în jurul unui element. De exemplu, creați un titluși fă un cadru în jurul lui.

Parametrii care caracterizează cadrul: 1) Grosimea cadrului, 2) Stilul cadrului și 3) Culoarea cadrului. Și să mergem în ordine:

• 1. Grosimea ramei: lățimea graniței: 2px;
• 2. Stilul cadru: stil de chenar: solid;
• 3. Culoare cadrul: culoarea chenarului: # ff0000;

Care sunt stilurile de rame în CSS? Mai jos sunt toate stilurile de chenar disponibile:

• punctat - Este un cadru punctat.
• întreruptă - Acesta este un cadru punctat
• solid - Acesta este un cadru solid
• dubla - Acesta este un cadru dublu
• canelură - Vedere volumetrică
• creastă - Vedere volumetrică
• medalion - Vedere volumetrică
• început - Vedere volumetrică

Acum avem totul pentru a crea o chenar în jurul titlului.

HTML

Creează un chenar în jurul titlului.

Și stilul în sine pentru cadru.

H2 (lățime chenar: 2px; stil chenar: solid; culoare chenar: # FF0000;)

Ca rezultat, o chenar roșu solid cu o grosime de 2px.

Cadrul este format din patru laturi: Superior, Dreapta, Inferiorși Stânga si, din moment ce am precizat proprietatea frontieră , apoi browserul desenează implicit toate cele patru laturi ale cadrului. Astfel, dacă trebuie să setați un cadru doar pe o parte, atunci sunt folosite prefixe care indică partea în care să creați cadrul.

• top - Sus.
• dreapta - Dreapta
• partea de jos - Partea de jos
• stânga - Stânga

Astfel, dacă vrem să facem un cadru doar în partea de jos a paragrafului, adică să-l subliniem, atunci la fiecare proprietate frontieră adăugați un prefix partea de jos ... Acest lucru va avea ca rezultat următoarea structură de cod.

H2 (lățime-chenar-jos: 2px; chenar-jos-stil: dublu; chenar-jos-culoare: # FF0000;)

Folosirea acestor stiluri pentru browser ar însemna că trebuie să creați doar un chenar de jos, de exemplu. subliniază titlul. În același mod, puteți duplica acest cod setând cadrul pe cealaltă parte, de exemplu, cel de sus.

H2 (lățime-chenar-jos: 2px; chenar-jos-stil: dublu; chenar-jos-culoare: # FF0000; chenar-sus-lățime: 2px; chenar-stil-sus: dublu; chenar-sus-culoare: # FF0000;)

Titlul va avea acum un chenar roșu în partea de sus și de jos. Același lucru se poate face și pentru alte părți.

După cum probabil ați observat deja, înregistrarea sa dovedit a fi destul de mare, prin urmare există un tip de înregistrare abreviat, care este adesea folosit în practică.

Imaginea de mai sus arată structura notației abreviate, unde este indicată proprietatea frontieră iar ca valori, separate printr-un spațiu, se indică lățimea cadrului - lățimea graniței , stilul cadrului este stil de chenar și culoarea chenarului - # ff0000 .

Adică atunci când browserul vede o astfel de notație prescurtată frontieră: 2px solid # ff0000; , va crea, de asemenea, o chenar pe toate cele patru laturi ale titlului. Această notație scurtă este echivalentă cu cea pe care am folosit-o mai sus (unde au fost aplicate trei proprietăți).

Dacă, folosind o notație scurtă, trebuie să specificați un cadru doar pe o parte, atunci adăugați un simplu la proprietatea care indică partea cu care să creați un cadru.

H2 (chenar-sus: 2px solid # ff0000;)

Deci, cu ajutorul unei note scurte, din partea de sus se realizează un cadru, unde sunt indicate și grosimea, stilul și culoarea cadrului.

În acest fel, folosind proprietatea frontieră se face un cadru în jurul oricărui element. De asemenea, cu ajutorul cadrului, se creează legături de subliniere atunci când este nevoie de o culoare diferită a sublinierii. Ei bine, asta e tot cu cadrele, trecem la următoarea lecție importantă, unde vom lua în considerare