Grænseegenskaben i CSS giver webdesignere mulighed for at angive stilen, bredden og farven på et elements grænser.
I CSS tillader en gradient en designer at anvende en jævn overgang mellem to eller flere farver. Du kan bruge gradienter til at skabe visuelle effekter såsom skygge, farveblanding og tekstur på elementerne på din webside.
Border gradient er en CSS-egenskab, der giver udviklere mulighed for at anvende en gradient til et elements kant.
En gradientkant skaber en visuel effekt, hvor kantens farve skifter fra en farve til en anden.
Indholdsfortegnelse
Hvorfor bruge en gradientkant?
Border gradienter var blandt de forskellige stylingfunktioner, der blev introduceret i CSS3. Dette er nogle af grundene til, at du bør have det på din næste webapp:
- Et kantforløb er fleksibelt: Du kan skabe komplekse og lagdelte effekter ved hjælp af gradientkanter. Dette er i modsætning til ensfarvede kanter, som er stive. Gradientkanter er derfor nyttige, når du skal håndtere komplekse layouts eller former, der kræver nuancerede visuelle design.
- Skab visuel appel: Ved at bruge gradientkanteffekten kan du tilføje iøjnefaldende visuelle effekter til dine designs. For eksempel kan du bruge dristige farvekontraster til at hjælpe med at henlede opmærksomheden på et bestemt element på din webside.
- Giver sømløs integration: Gradientkanter giver dig mulighed for problemfrit at integrere grænsen i dit elements baggrund. En sådan tilgang giver din webside et solidt og sammenhængende udseende, der viser et gennemtænkt design.
Sådan tilføjes Border Gradient i CSS
Før vi demonstrerer, hvordan man tilføjer en kantgradient, kan vi illustrere, hvordan man tilføjer en kant til et HTML-element.
Vi kan bruge denne kode;
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"> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> <title>Document</title> </head> <body> <div class="box contains-border"> How to add a Border illustrated!!! </div> </body> </html>
CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}
Den gengivne side vil fremstå som:
Selvom ovenstående kode har en kant, er den ikke så tiltalende for øjnene, da den er tom. Vi har kun en 5px solid Rebecca lilla kant omkring vores div.
Vi kan gøre vores grænse tiltalende ved at bruge grænsegradienter. Der findes forskellige tilgange til at tilføje en kantgradient. Følgende er nogle af de vigtigste:
Brug af gradientkanter (lineær gradient, radial gradient, konisk gradient)
Vi vil illustrere, hvordan man bruger Gradient Borders på tre forskellige måder:
Lineær gradient
En lineær gradient skaber en jævn overgang mellem to eller flere farver i en lige linje. Vi kan bruge følgende kode til at demonstrere:
HTML
<!DOCTYPE html> <html> <head> <title>Linear Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box linear-gradient"> Linear Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.linear-gradient {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}
Vi har specificeret kantstilen som solid, hvilket betyder, at kanten omkring vores boks er en fast linje. Kantbredden på vores kode er 10px.
Den lineære gradient starter med rgb(143, 55, 0)” og slutter med “rgb(66, 228, 250)”. Vi har også specificeret en 45 graders vinkel. Bredden af kantbilledet er indstillet til “1”.
Den gengivne side vil fremstå som:
Radial gradient
En radial gradient skaber en cirkulær gradient, der udstråler fra et centralt punkt, hvilket giver brugerne mulighed for at skifte fra en farve til en anden i en websides element.
Vi kan illustrere, hvordan man tilføjer en radial gradient ved hjælp af denne kode:
HTML
<!DOCTYPE html> <html> <head> <title>Radial Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box radial-gradient"> Radial Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.radial-gradient {
border-style: solid;
border-width: 5px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}
Vi har sat grænsestilen for vores element som solid. Vi har også givet vores kant en kantbredde på 5px.
Den radiale gradient starter med mørkegrøn RGB(0,143,104) og slutter med lys gul, angivet med rgb(250,224,66).
‘1’et i slutningen af koden repræsenterer egenskaben border-image-repeat. Denne værdi instruerer browseren i kun at gentage kantbilledet én gang rundt om elementets kant.
Den gengivne side vil fremstå som:
Konisk gradient
En konisk gradient skaber en cirkulær farveovergang. I denne effekt starter overgangen fra et centralt punkt og spreder sig derefter udad og danner en cirkulær effekt.
HTML
<!DOCTYPE html> <html> <head> <title>Conic Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box conic-gradient"> Conic Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.conic-gradient {
border-style: solid;
border-width: 7.5px;
border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}
I denne kode sætter vi kantstilen som solid og giver grænsen en bredde på 7,5 px. Egenskaben border-image angiver grænsegradienten. Der er syv farver, der starter med rød og slutter med rgb(255, 0, 38).
Figur ‘1’ i slutningen af koden giver grænsebredden på 1 pixel.
Den gengivne side vil fremstå som:
Brug af kantbilleder
Kantbilleder erstatter de almindelige faste rammer for HTML-elementer. Kantbilleder bruges til at skabe komplekse designs i stedet for at kombinere farver for at skabe en kantgradient.
HTML
<!DOCTYPE html> <html> <head> <title>Border Images Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box border-images"> Border Images Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.border-images {
border-style: solid;
border-width: 15px;
border-image-source: url(/images/elephant-2910293_1920.jpg);
border-image-slice: 60 30;
}
Vi har givet vores border-width-egenskab en bredde på 15px og indstillet kant-stilen som solid.
Border-image-slice indstiller bredden og højden af kantfeltet til henholdsvis 60 % og 30 %.
Den gengivne side vil fremstå som:
Brug af stenografi egenskab
En stenografi-egenskab giver udviklere mulighed for at style flere individuelle CSS-egenskaber ved hjælp af en linje kode. I dette tilfælde bruger vi border-image til at specificere border-image-source og border-image-slice.
HTML
<!DOCTYPE html> <html> <head> <title>Shorthand Property Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box shorthand"> Shorthand Property Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.shorthand {
border-style: solid;
border-width: 15px;
border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}
Den gengivne side vil fremstå som:
CSS border gradient generatorer
CSS-grænsegradientgeneratorer hjælper udviklere med at tilføje gradienteffekter på elementer på en webside. Disse generatorer giver dig mulighed for at justere indstillingerne, hvilket betyder, at du ikke behøver at oprette alt fra bunden. Følgende er nogle af de værktøjer, du kan bruge:
#1. CSS Gradient Generator-konverterende farver
Konvertering af farver giver dig mulighed for at generere lineær eller radial gradient CSS-kode med op til fem farver. Den CSS-gradientkode, du genererede, kan bruges som et elements kant eller baggrundsbillede.
Du kan gøre følgende med denne generator;
- Vælg op til fem farver, og brug dem i kantforløbet.
- Vælg retningen på gradienten. Værktøjet har både lineære og radiale gradienter.
- Du kan bestemme, hvordan overgangen af farver skal ske ved hjælp af farvestopfunktionen.
Når du er færdig med at eksperimentere og generere koden, kan du kopiere og bruge den på din hjemmeside.
#2. CSS Border Gradient Generator-Ubrugt CSS
Unused-CSS hjælper udviklere med at generere gradientgrænser, som de kan anvende på blokelementer uden at oprette pseudo-elementer eller ekstra elementer.
Du kan gøre følgende;
- Vælg mellem forskellige gradienttyper. Du kan nemt skifte mellem radiale og lineære gradienter, når du arbejder med dette værktøj.
- Fanen Eksempel. Værktøjet lader dig se et eksempel på, hvordan kantgradienten vil se ud på din webside, når du tilpasser den.
- Farven stopper. Dette værktøj gør det nemt at beslutte, hvordan overgange vil ske for forskellige farver.
- Tilpasning af grænsestørrelse. Du kan nemt tilpasse kantstørrelsen og kantradiusen med dette værktøj.
Når du er tilfreds med den genererede kode, kan du kopiere og bruge den på dit projekt.
#3. Gradient Border Generator- Amit Sheen
Dette værktøj har otte forskellige baggrundsområder, hvilket gør det muligt for udviklere at skabe afrundede gradientkanteffekter.
Du kan opnå følgende;
- Opret gradientanimationer. Værktøjet giver dig mulighed for at generere gradientanimationer, der skifter mellem to eller flere farver.
- Du kan inkludere JavaScript-kode. Hvis dit brugerdefinerbare element har brug for JS-kode, kan du altid finde og tilpasse det fra kontrolpanelet.
- Live preview. Du kan se ændringerne af din kode, mens du tilpasser den.
Du kan kopiere og indsætte koden efter at have tilpasset dine kantgradienteffekter til din smag.
Konklusion
Når du designer dine websider, kan du bruge en af ovenstående fremgangsmåder til at tilføje en gradientkant til dine elementer. Valget af tilgang kan variere baseret på præference, færdighedsniveau og arten af det element, du styler.
Du kan også bruge forskellige tilgange til forskellige elementer på den samme webside.
Se, hvordan du opretter en dobbelt ramme i CSS for at forbedre din websides visuelle appel.