Robežām ir izšķiroša nozīme tīmekļa dizainā/izstrādē, jo tās var pievērst lietotāju uzmanību vai atdalīt tīmekļa lapas saturu. Varat izmantot apmales saīsinājumu, ja vēlaties, lai visas četras HTML elementa apmales būtu vienādas.
No otras puses, jūs varat arī izmantot apmales krāsu, apmales stilu un apmales platuma garuma rekvizītus, lai katra apmale būtu atšķirīga/unikāla. Ja vēlaties norādīt apmales krāsu, mēs izmantojam apmales krāsu, izmantojam apmales platumu, lai noteiktu apmales platumu, un norādām, vai apmale būs svītraina, dubultā vai viengabalaina, izmantojot apmales stila rekvizītu.
Varat arī atlasīt mērķauditoriju pēc atsevišķām apmalēm, izmantojot tādus rekvizītus kā border-block-start un border-top
Dubultā apmale ir tad, kad HTML elementu ieskauj divas paralēlas līnijas. Abas līnijas ir atdalītas ar atstarpi, ko var atstāt caurspīdīgu vai aizpildīt ar attēlu vai fona krāsu.
Piemēram, mums var būt reģistrēšanās/pieteikšanās poga, ko ieskauj dubulta apmale.
Kāpēc dubultā robeža?
- Atdalīšana: varat izmantot dubultmalu, lai palielinātu tīmekļa lapas lasāmību un skenējamību, atdalot dažādus HTML elementus. Piemēram, varat izmantot dubultās apmales, lai tīmekļa lapā atdalītu elementus, piemēram, galvenes, pamattekstu un kājenes.
- Vizuālā pievilcība: varat izmantot dažādas/kontrastējošas krāsas uz dubultajām apmalēm, lai padarītu dažādus elementus vizuāli pievilcīgākus.
- Rādīt hierarhiju: varat skaidri atšķirt svarīgos un mazāk svarīgos elementus tīmekļa lapā, izmantojot dubultās apmales.
- Vienkārša pielāgošana: varat izveidot personalizētus un unikālus dizainus, izmantojot dubultās apmales. Piemēram, varat mainīt katras līnijas krāsu vai platumu.
- Uzsvars: izmantojot dubultās apmales rekvizītu, varat pievērst uzmanību konkrētām saitēm vai pogām tīmekļa lapā.
Lai izveidotu dubulto apmali CSS, varat izmantot šādus veidus.
Izmantojot apmales stila īpašumu
Apmales stila rekvizīts iestata elementa četru apmaļu stilu. Šajā gadījumā stila iestatīšanai mēs izmantojam dubulto atslēgvārdu. Izmantojot dubulto atslēgvārdu, starp abām apmalēm tiek izveidots automātisks polsterējums.
Demonstrācijas nolūkos mēs iestatīsim apmales platumu uz 15 pikseļiem. Mēs arī izvēlēsimies apmales krāsu sarkanai un norādīsim apmales stilu kā dubultu.
HTML kods:
<!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>
CSS kods:
*{
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;
}
Izvade būs:
Izmantojot funkciju linear-gradient().
Šī funkcija iestata lineāru gradientu kā fona attēlu. Rezultāts ir pakāpeniska pāreja starp divām krāsām pa taisnu līniju. Mēs izmantojam atslēgvārdu līdz, lai atzīmētu gradienta līnijas sākumpunktu. Ja pasūtījums nav norādīts, noklusējuma vērtība ir uz leju.
Tālāk norādītais kods nodrošina mūsu lodziņa apmales platumu 7 pikseļi. Pēc tam mēs varam norādīt lineāro gradientu katras kastes puses fona īpašumā.
HTML kods:
<!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>
CSS kods:
*{
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);
}
Izvade būs:
Outline īpašuma izmantošana
Kontūra ir līnija, kas novilkta ārpus elementa robežas. Tādējādi tiek panākts dubultās apmales efekts, un mēs varam izmantot kontūru un vienu apmali. Mums ir jāizmanto kontūru nobīde, lai pievienotu atstarpi starp apmali un kontūras īpašībām.
HTML kods:
<!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>
CSS kods:
*{
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;
}
Atveidotā lapa izskatīsies šādi:
Izmantojot lodziņa ēnu rekvizītu
Rekvizīts box-shadow pievieno ēnas efektu ap elementa rāmi. Varat izmantot vairākus lodziņu ēnu efektus, atdalot tos ar komatiem. Sāciet, pārliecinoties, ka nobīdes un izplūšanas iestatījumi ir nulle, un pēc tam iestatiet ēnām pareizos izmērus.
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>
CSS kods:
*{
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;
}
Atveidotā lapa izskatīsies šādi:
Fona klipa rekvizīta izmantošana
Fona klipa rekvizīts nosaka, cik tālu fonam ir jāsniedz elementā. Paplašinājums var būt apmales lodziņā, polsterējuma lodziņā vai satura lodziņā.
HTML kods:
<!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>
CSS kods:
*{
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);
}
Atveidotā lapa izskatīsies šādi:
Pseido elementu izmantošana
Pseidoelementi, ko attēlo ::pirms un ::pēc atlasītāji, ļauj tīmekļa dizaineriem veidot HTML dokumenta daļu stilu, nepievienojot kodam marķējumu.
Mēs varam ilustrēt, kā izmantot pseidoelementus, lai izveidotu dubultu apmali, izmantojot šo kodu:
HTML dokuments
<!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;
}
Atveidotā lapa izskatīsies šādi:
Reālās pasaules dubultrobežu CSS piemēri
Daudzās vietnēs tiek izmantots dubultās malas CSS rekvizīts. Jums ir jāapvieno dubultās robežas rekvizīts ar citiem CSS rekvizītiem, lai no tā iegūtu vislabāko. Tālāk ir sniegti divi dubultās apmales piemēri darbībā;
Poga “Grozs” vietnē Amazon
Amazon ir viens no lielākajiem nosaukumiem e-komercijas telpā. Tās groza pogai ir dubultā apmale CSS vizuālai estētikai un mudina lietotājus rīkoties.
Dubultās apmales parādās, kad lietotājs virza kursoru virs pogas “grozs”. Robežas ir redzamas arī, virzot kursoru virs Amazon navigācijas izvēlnes.
Mailchimp pogas
Mailchimp ir e-pasta mārketinga pakalpojums, kas lietotājiem ļauj izveidot, palaist un izsekot kampaņas. Tās tīmekļa vietne izmanto dubultās apmales efektus dažādās sadaļās. Reģistrēšanās un pieteikšanās pogām ir dubultas apmales, lai lietotājiem pārlūkojot “radītu” steidzamības sajūtu.
Šo pogu apakšējās malas apmale sabiezē, lietotājam laižot caur tām kursoru.
Paraugprakse, izmantojot dubulto CSS efektu
Izmantojot dubulto CSS, ir viegli aizraut. Gala mērķis ir nodrošināt, lai lietotāji ērti pārvietotos un uzsvērtu galvenās jūsu vietnes jomas. Ievērojiet šo paraugpraksi:
- Izmantojiet konsekventu stilu: ja izmantojat dubultās apmales, pārliecinieties, ka stils ir konsekvents visos elementos. Piemēram, dubultās apmales var izmantot navigācijas, aicinājuma uz darbību un reģistrēšanās/pieteikšanās pogām. Ja iespējams, pārliecinieties, ka elementiem ar dubultām apmalēm ir vienādas krāsas un piemales biezums.
- Nodrošiniet, lai šīs dubultās robežas darbotos dažādās ierīcēs: mēs dzīvojam pasaulē, kurā cilvēki pārlūko vietnes no viedtālruņiem, personālajiem datoriem un planšetdatoriem. Pārbaudiet, vai dažāda lieluma ekrānos tiek parādītas dubultās apmales, kā paredzēts.
- Izmantojiet tos taupīgi: jums var rasties kārdinājums pārmērīgi izmantot noteiktu CSS efektu pēc tam, kad to pirmo reizi atklājat. Tomēr dubultā CSS ir piemērota dažādiem tīmekļa lapas elementiem. Izmantojiet šo īpašumu tikai vietās, kur tas piešķir dizainam pievienoto vērtību.
Secinājums
Mēs esam uzsvēruši galvenās pieejas, kuras varat izmantot, lai izveidotu dubultu apmali CSS. Pieejas izvēle būs atkarīga no tā, ko vēlaties sasniegt ar dubulto apmali, un jūsu vēlmēm. Varat izvēlēties pieturēties pie viena vai vairāku dubultmalu stilu kombinācijas vienā lapā.
Varat apskatīt šos CSS resursus, lai detalizēti izprastu kaskādes stila lapas.