Granițele sunt cruciale în proiectarea/dezvoltarea web, deoarece pot atrage atenția asupra utilizatorilor sau pot separa conținutul într-o pagină web. Puteți utiliza prescurtarea chenarului când doriți ca toate cele patru chenare ale unui element HTML să fie la fel.
Pe de altă parte, puteți utiliza, de asemenea, culoarea chenarului, stilul chenarului și proprietățile lungi pentru lățimea chenarului pentru a face fiecare chenar diferit/unic. Când doriți să specificați culoarea chenarului, folosim culoarea chenarului, folosim lățimea chenarului pentru a determina lățimea chenarului și specificăm dacă un chenar va fi punctat, dublu sau solid folosind proprietatea stil bordur.
De asemenea, puteți viza margini individuale folosind proprietăți precum border-block-start și border-top
Un chenar dublu este atunci când două linii paralele înconjoară un element HTML. Cele două linii sunt separate printr-un spațiu care poate fi lăsat transparent sau umplut cu o imagine sau o culoare de fundal.
De exemplu, putem avea un buton de înregistrare/autentificare înconjurat de un chenar dublu.
Cuprins
De ce chenar dublu?
- Separare: puteți utiliza un chenar dublu pentru a crește lizibilitatea și scanarea unei pagini web prin separarea diferitelor elemente HTML. De exemplu, puteți avea chenare duble pentru a separa elemente precum anteturile, corpul și subsolurile unei pagini web.
- Atractie vizuală: puteți utiliza culori diferite/contrastate pe marginile duble pentru a face diferite elemente mai atractive din punct de vedere vizual.
- Afișați ierarhia: puteți distinge clar între elementele importante și cele mai puțin importante dintr-o pagină web folosind chenare duble.
- Personalizare ușoară: puteți crea modele personalizate și unice cu ajutorul chenarelor duble. De exemplu, puteți schimba culoarea sau lățimea fiecărei linii.
- Subliniere: Folosind proprietatea chenar dublu, puteți atrage atenția asupra anumitor linkuri sau butoane dintr-o pagină web.
Puteți utiliza următoarele moduri pentru a crea chenarul dublu în CSS.
Utilizarea proprietății în stil chenar
Proprietatea border-style stabilește stilul celor patru margini ale unui element. Folosim cuvântul cheie dublu pentru a seta stilul în acest caz. Când folosim cuvântul cheie dublu, se creează umplutură automată între cele două margini.
În scopuri demonstrative, vom seta lățimea chenarului la 15px. De asemenea, vom alege culoarea chenarului nostru să fie roșu și vom indica stilul chenarului ca fiind dublu.
Cod HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2> Border Property</h2> </div> </body> </html>
Cod CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}
Ieșirea va fi:
Folosind funcția linear-gradient().
Această funcție setează un gradient liniar ca imagine de fundal. Rezultatul este o tranziție treptată între două culori de-a lungul unei linii drepte. Folosim cuvântul cheie to pentru a marca punctul de pornire al liniei de gradient. Dacă comanda nu este specificată, valoarea implicită este în jos.
Codul de mai jos oferă casetei noastre o lățime a marginii de 7 px. Apoi putem specifica gradientul liniar pe proprietatea de fundal a fiecărei părți a casetei.
Cod HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>linear-gradient() function</h2> </div> </body> </html>
Cod CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}
Ieșirea va fi:
Utilizarea proprietății Outline
Un contur este o linie trasată în afara graniței unui element. Acest lucru realizează efectul de chenar dublu și putem folosi un contur și un singur chenar. Trebuie să folosim outline-offset pentru a adăuga un spațiu între chenar și proprietățile de contur.
Cod HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Outline Property</h2> </div> </body> </html>
Cod CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}
Pagina redată va apărea după cum urmează:
Folosind proprietatea box-shadow
Proprietatea box-shadow adaugă un efect de umbră în jurul cadrului unui element. Puteți avea mai multe efecte de umbră, separate prin virgule. Începeți prin a vă asigura că setările de offset și de estompare sunt zero, apoi setați umbrele la dimensiunile adecvate.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Box Shadow Property</h2> </div> </body> </html>
Cod CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
Pagina redată va apărea după cum urmează:
Folosind proprietatea background-clip
Proprietatea background-clip determină cât de departe ar trebui să se extindă fundalul într-un element. Extensia poate fi pe margine-box, padding-box sau content-box.
Cod HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Background-Clip Property</h2> </div> </body> </html>
Cod CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}
Pagina redată va apărea după cum urmează:
Utilizarea pseudo-elementelor
Pseudo-elementele, reprezentate de selectoarele ::before și ::after permit designerilor web să stileze părți ale unui document HTML fără a adăuga markup codului.
Putem ilustra cum să folosiți pseudo-elemente pentru a crea un chenar dublu folosind acest cod:
document HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>pseudo property</h2> </div> </body> </html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}
Pagina redată va apărea după cum urmează:
Exemple reale de CSS cu două margini
Proprietatea CSS cu chenar dublu este utilizată în multe site-uri web. Trebuie să combinați proprietatea cu chenar dublu cu alte proprietăți CSS pentru a obține cele mai bune rezultate. Următoarele sunt două exemple de chenar dublu în acțiune;
Butonul „Coș” de pe Amazon
Amazon este unul dintre cele mai mari nume din spațiul comerțului electronic. Butonul său de coș are un CSS cu chenar dublu pentru estetica vizuală și îi determină pe utilizatori să acționeze.
Chenarele duble apar atunci când un utilizator trece cu mouse-ul peste butonul „coș”. Granițele sunt vizibile și când treceți cu mouse-ul peste meniul de navigare al Amazon.
Butoanele Mailchimp
Mailchimp este un serviciu de marketing prin e-mail care permite utilizatorilor să creeze, să lanseze și să urmărească campanii. Site-ul său web folosește efecte de chenar dublu pe diferite secțiuni. Butoanele de înregistrare și de conectare au margini duble pentru a „crea” un sentiment de urgență pe măsură ce utilizatorii navighează.
Chenarul din partea de jos a acestor butoane se îngroașă pe măsură ce un utilizator trece un cursor prin ele.
Cele mai bune practici atunci când utilizați efectul CSS cu chenar dublu
Este ușor să te lași dus de cap atunci când folosești CSS dublu. Scopul final este de a vă asigura că utilizatorii navighează cu ușurință și pun accentul pe zonele majore de pe site-ul dvs. Urmați aceste bune practici:
- Utilizați un stil consecvent: dacă utilizați chenare duble, asigurați-vă că stilul este consecvent pentru toate elementele. De exemplu, chenarele duble pot fi folosite pe butoanele de navigare, de îndemn la acțiune și de înscriere/conectare. Dacă este posibil, asigurați-vă că aveți aceleași culori și grosimi ale marginilor între elementele cu chenaruri duble.
- Asigurați-vă că aceste chenare duble funcționează pe diferite dispozitive: trăim într-o lume în care oamenii navighează pe site-uri web de pe smartphone-uri, computere și tablete. Testați pentru a vă asigura că chenarele duble sunt afișate conform așteptărilor pe diferite dimensiuni de ecran.
- Folosiți-le cu moderație: puteți fi tentat să folosiți excesiv un anumit efect CSS după ce îl descoperiți pentru prima dată. Cu toate acestea, CSS dublu se potrivește diferitelor elemente dintr-o pagină web. Utilizați această proprietate numai în zonele în care adaugă valoare designului.
Concluzie
Am evidențiat abordările majore pe care le puteți utiliza pentru a crea un chenar dublu în CSS. Alegerea abordării va depinde de ceea ce doriți să realizați cu chenarul dublu și de preferințele dvs. Puteți decide să rămâneți la unul sau la o combinație de mai multe stiluri cu chenar dublu pe aceeași pagină.
Puteți consulta aceste resurse CSS pentru a înțelege Foile de stil în cascadă în detaliu.