Grænser er afgørende i webdesign/udvikling, da de kan henlede opmærksomheden på brugere eller adskille indhold på en webside. Du kan bruge kantstenografien, når du ønsker, at alle fire kanter på et HTML-element skal være ens.
På den anden side kan du også bruge egenskaberne for kantfarve, kantstil og kant-bredde longhand-egenskaber for at gøre hver kant anderledes/unik. Når du vil angive grænsens farve, bruger vi kantfarve, bruger kantbredde til at bestemme grænsens bredde og specificerer, om en kant skal være stiplet, dobbelt eller solid ved hjælp af egenskaben kantstil.
Du kan også målrette mod individuelle grænser ved hjælp af egenskaber som border-block-start og border-top
En dobbelt kant er, når to parallelle linjer omgiver et HTML-element. De to linjer er adskilt af et mellemrum, der kan efterlades gennemsigtigt eller udfyldes med et billede eller en baggrundsfarve.
For eksempel kan vi have en tilmeldings-/login-knap omgivet af en dobbelt ramme.
Indholdsfortegnelse
Hvorfor dobbelt grænse?
- Adskillelse: Du kan bruge en dobbelt ramme til at øge læsbarheden og scanbarheden af en webside ved at adskille forskellige HTML-elementer. For eksempel kan du have dobbelte rammer til at adskille elementer såsom sidehoveder, brødtekst og sidefødder på en webside.
- Visuel appel: Du kan bruge forskellige/kontrasterende farver på de dobbelte kanter for at gøre forskellige elementer mere visuelt tiltalende.
- Vis hierarki: Du kan tydeligt skelne mellem de vigtige og mindre vigtige elementer på en webside ved hjælp af dobbelte rammer.
- Nem tilpasning: Du kan skabe personlige og unikke designs ved hjælp af dobbelte rammer. For eksempel kan du ændre farven eller bredden på hver linje.
- Vægt: Ved at bruge egenskaben med dobbelt kant kan du henlede opmærksomheden på specifikke links eller knapper på en webside.
Du kan bruge følgende måder til at oprette den dobbelte ramme i CSS.
Brug af ejendom i border-stil
Egenskaben border-style angiver stilen for et elements fire grænser. Vi bruger det dobbelte nøgleord til at indstille stilen i dette tilfælde. Når vi bruger det dobbelte søgeord, skabes der automatisk polstring mellem de to kanter.
Til demonstrationsformål indstiller vi grænsebredden til 15px. Vi vil også vælge vores kantfarve til at være rød og angive kantstilen som dobbelt.
HTML kode:
<!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 kode:
*{
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;
}
Outputtet vil være:
Brug af linear-gradient() funktion
Denne funktion indstiller en lineær gradient som baggrundsbillede. Resultatet er en gradvis overgang mellem to farver langs en lige linje. Vi bruger nøgleordet til at markere startpunktet for gradientlinjen. Hvis rækkefølgen er uspecificeret, er standardværdien til bund.
Koden nedenfor giver vores boks en 7px kantbredde. Vi kan derefter angive den lineære gradient på baggrundsegenskaben på hver side af boksen.
HTML kode:
<!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 kode:
*{
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);
}
Outputtet vil være:
Brug af Outline Property
En kontur er en linje tegnet uden for grænsen af et element. Dette opnår den dobbelte kanteffekt, og vi kan bruge en kontur og en enkelt kant. Vi skal bruge outline-offset for at tilføje et mellemrum mellem kant- og konturegenskaberne.
HTML kode:
<!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 kode:
*{
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;
}
Den gengivede side vises som følger:
Brug af box-shadow Property
Egenskaben box-shadow tilføjer en skyggeeffekt omkring rammen af et element. Du kan have flere boks-skyggeeffekter adskilt af kommaer. Start med at sikre, at indstillingerne for forskydning og sløring er nul, og indstil derefter skyggerne til de rigtige størrelser.
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 kode:
*{
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;
}
Den gengivede side vises som følger:
Brug af baggrundsklip Property
Egenskaben for baggrundsklip bestemmer, hvor langt baggrunden skal strække sig i et element. Udvidelsen kan være på border-box, padding-box eller content-box.
HTML kode:
<!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 kode:
*{
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);
}
Den gengivede side vises som følger:
Brug af pseudoelementer
Pseudo-elementer, repræsenteret af ::before og ::after selectors, giver webdesignere mulighed for at style dele af et HTML-dokument uden at tilføje markup til koden.
Vi kan illustrere, hvordan man bruger pseudo-elementer til at skabe en dobbelt grænse ved hjælp af denne kode:
HTML-dokument
<!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;
}
Den gengivede side vises som følger:
Eksempler fra den virkelige verden på dobbeltgrænsende CSS
CSS-egenskaben med dobbelt kant bruges på mange websteder. Du skal kombinere egenskaber med dobbelt kant med andre CSS-egenskaber for at få det bedste ud af det. Følgende er to eksempler på den dobbelte grænse i aktion;
Knappen “Indvogn” på Amazon
Amazon er et af de største navne inden for e-handel. Dens vognknap har en dobbeltramme CSS for visuel æstetik og beder brugerne om at handle.
De dobbelte rammer vises, når en bruger svæver over knappen ‘vogn’. Grænserne er også synlige, når du svæver over Amazons navigationsmenu.
Mailchimp knapper
Mailchimp er en e-mail-marketingtjeneste, der giver brugerne mulighed for at oprette, starte og spore kampagner. Dens hjemmeside bruger dobbelte grænseeffekter på forskellige sektioner. Tilmeldings- og login-knapperne har dobbelte rammer for at ‘skabe’ en følelse af, at det haster, når brugerne bladrer igennem.
Kanten på undersiden af disse knapper bliver tykkere, når en bruger fører en markør gennem dem.
Bedste praksis ved brug af CSS-effekt med dobbelt kant
Det er nemt at lade sig rive med, når du bruger dobbelt CSS. Slutmålet er at sikre, at brugerne nemt navigerer og fremhæver de vigtigste områder på dit websted. Følg disse bedste fremgangsmåder:
- Brug en ensartet stil: Hvis du bruger dobbelte rammer, skal du sikre dig, at stilen er konsistent på alle elementer. For eksempel kan dobbelte rammer bruges på knapperne for navigation, opfordring til handling og tilmelding/login. Hvis det er muligt, skal du sikre dig, at du har de samme farver og margentykkelser på tværs af elementer med dobbelte kanter.
- Sørg for, at disse dobbelte grænser fungerer på forskellige enheder: Vi lever i en verden, hvor folk gennemser websteder fra smartphones, pc’er og tablets. Test for at sikre, at dobbelte rammer vises som forventet på forskellige skærmstørrelser.
- Brug dem sparsomt: Du kan blive fristet til at overbruge en bestemt CSS-effekt efter at have opdaget den for første gang. Dobbelt CSS passer dog til forskellige elementer på en webside. Brug kun denne ejendom i områder, hvor den tilføjer værdi til designet.
Konklusion
Vi har fremhævet de vigtigste tilgange, du kan bruge til at oprette en dobbelt grænse i CSS. Valget af tilgang vil afhænge af, hvad du vil opnå med den dobbelte grænse og dine præferencer. Du kan beslutte at holde dig til en eller en kombination af flere stilarter med dobbeltkant på samme side.
Du kan tjekke disse CSS-ressourcer for at forstå Cascading Style Sheets i detaljer.