Gränser är avgörande vid webbdesign/utveckling eftersom de kan dra uppmärksamhet till användare eller separat innehåll på en webbsida. Du kan använda gränsen förkortning när du vill att alla fyra gränserna på ett HTML-element ska vara samma.
Å andra sidan kan du också använda egenskaperna för kantfärg, kantstil och långhandsegenskaper för kantbredd för att göra varje kant annorlunda/unik. När du vill ange gränsens färg använder vi gränsfärg, använder gränsbredd för att bestämma gränsens bredd och anger om en gräns ska vara streckad, dubbel eller hel med egenskapen gränssnitt.
Du kan också rikta in dig på enskilda gränser med hjälp av egenskaper som border-block-start och border-top
En dubbel kant är när två parallella linjer omger ett HTML-element. De två linjerna är åtskilda av ett mellanrum som kan lämnas genomskinligt eller fyllas med en bild eller en bakgrundsfärg.
Till exempel kan vi ha en registrerings-/inloggningsknapp omgiven av en dubbel ram.
Innehållsförteckning
Varför dubbel gräns?
- Separation: Du kan använda en dubbel ram för att öka läsbarheten och skanningsbarheten för en webbsida genom att separera olika HTML-element. Du kan till exempel ha dubbla ramar för att separera element som sidhuvud, brödtext och sidfötter på en webbsida.
- Visuellt tilltalande: Du kan använda olika/kontrasterande färger på de dubbla kanterna för att göra olika element mer visuellt tilltalande.
- Visa hierarki: Du kan tydligt skilja mellan de viktiga och mindre viktiga elementen på en webbsida med hjälp av dubbla ramar.
- Enkel anpassning: Du kan skapa personliga och unika mönster med hjälp av dubbla ramar. Du kan till exempel ändra färg eller bredd på varje linje.
- Betoning: Genom att använda egenskapen dubbelkant kan du uppmärksamma specifika länkar eller knappar på en webbsida.
Du kan använda följande sätt för att skapa den dubbla kanten i CSS.
Använder egendom i kantstil
Egenskapen border-style anger stilen för de fyra gränserna för ett element. Vi använder det dubbla nyckelordet för att ställa in stilen i det här fallet. När vi använder det dubbla nyckelordet skapas automatisk utfyllnad mellan de två gränserna.
För demonstrationsändamål kommer vi att ställa in kantens bredd till 15px. Vi kommer också att välja vår kantfärg att vara röd och indikera kantstilen som dubbel.
HTML-kod:
<!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-kod:
*{
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;
}
Utgången blir:
Använder linjär-gradient() funktion
Denna funktion ställer in en linjär gradient som bakgrundsbild. Resultatet är en gradvis övergång mellan två färger längs en rak linje. Vi använder nyckelordet till för att markera startpunkten för gradientlinjen. Om ordningen är ospecificerad är standardvärdet till botten.
Koden nedan ger vår box en 7px kantbredd. Vi kan sedan specificera den linjära gradienten på bakgrundsegenskapen för varje sida av rutan.
HTML-kod:
<!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-kod:
*{
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);
}
Utgången blir:
Använda Outline Property
En kontur är en linje som ritas utanför gränsen för ett element. Detta uppnår den dubbla kanteffekten, och vi kan använda en kontur och en enkel kant. Vi måste använda outline-offset för att lägga till ett mellanslag mellan gräns- och konturegenskaperna.
HTML-kod:
<!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-kod:
*{
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 renderade sidan kommer att visas enligt följande:
Använda box-shadow Property
Box-shadow-egenskapen lägger till en skuggeffekt runt ramen för ett element. Du kan ha flera box-skuggeffekter separerade med kommatecken. Börja med att se till att inställningarna för offset och oskärpa är noll och ställ sedan in skuggorna till rätt storlek.
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-kod:
*{
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 renderade sidan kommer att visas enligt följande:
Använder bakgrundsklipp-egenskap
Egenskapen för bakgrundsklipp bestämmer hur långt bakgrunden ska sträcka sig inom ett element. Tillägget kan vara på kantlådan, utfyllnadslådan eller innehållslådan.
HTML-kod:
<!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-kod:
*{
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 renderade sidan kommer att visas enligt följande:
Använda pseudoelement
Pseudo-element, representerade av ::before och ::after-väljare, tillåter webbdesigners att utforma delar av ett HTML-dokument utan att lägga till uppmärkning till koden.
Vi kan illustrera hur man använder pseudoelement för att skapa en dubbelkant med hjälp av denna kod:
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 renderade sidan kommer att visas enligt följande:
Verkliga exempel på CSS med dubbla gränser
CSS-egenskapen med dubbla gränser används på många webbplatser. Du måste kombinera dubbelkantegenskap med andra CSS-egenskaper för att få ut det bästa av det. Följande är två exempel på den dubbla gränsen i aktion;
Knappen ”Korg” på Amazon
Amazon är ett av de största namnen inom e-handelsområdet. Dess kundvagnsknapp har en CSS med dubbla ramar för visuell estetik och uppmanar användare att agera.
De dubbla ramarna visas när en användare håller muspekaren över ”vagn”-knappen. Gränserna är också synliga när du håller muspekaren över Amazons navigeringsmeny.
Mailchimp-knappar
Mailchimp är en e-postmarknadsföringstjänst som låter användare skapa, lansera och spåra kampanjer. Dess webbplats använder dubbla kanteffekter på olika sektioner. Registrerings- och inloggningsknapparna har dubbla ramar för att ”skapa” en känsla av brådska när användare bläddrar igenom.
Kanten på undersidan av dessa knappar tjocknar när en användare för en markör genom dem.
Bästa tillvägagångssätt när du använder CSS-effekt med dubbla gränser
Det är lätt att ryckas med när du använder dubbel CSS. Slutmålet är att säkerställa att användarna enkelt navigerar och betonar de viktigaste områdena på din webbplats. Följ dessa bästa metoder:
- Använd en konsekvent stil: Om du använder dubbla ramar, se till att stilen är konsekvent på alla element. Dubbla ramar kan till exempel användas på knapparna för navigering, uppmaning och registrering/inloggning. Om möjligt, se till att du har samma färger och marginaltjocklekar över element med dubbla kanter.
- Se till att dessa dubbla gränser fungerar på olika enheter: Vi lever i en värld där människor surfar på webbplatser från smartphones, datorer och surfplattor. Testa för att säkerställa att dubbla ramar visas som förväntat på olika skärmstorlekar.
- Använd dem sparsamt: Du kan bli frestad att överanvända en viss CSS-effekt efter att ha upptäckt den för första gången. Dubbel CSS passar dock olika element på en webbsida. Använd endast den här egenskapen i områden där den ger mervärde till designen.
Slutsats
Vi har lyft fram de viktigaste metoderna du kan använda för att skapa en dubbel ram i CSS. Valet av tillvägagångssätt beror på vad du vill uppnå med den dubbla gränsen och dina preferenser. Du kan välja att hålla dig till en eller en kombination av flera stilar med dubbla ramar på samma sida.
Du kan kolla in dessa CSS-resurser för att förstå Cascading Style Sheets i detalj.