Hvordan legge til en dobbel kant med forskjellige farger?

Doble rammer kan legges til med en annen farge for å gjøre innholdet mer attraktivt og unikt fra andre deler av siden. For dette formålet ' :før ' velgeren brukes, og ' innhold ”-egenskapen brukes til å utvide innholdet. Denne artikkelen demonstrerer trinnvise instruksjoner for å legge til doble rammer med forskjellige farger.

Hvordan legge til en dobbel kant med forskjellige farger?

For å legge til en dobbel kantlinje på en hvilken som helst form ved hjelp av CSS, ' :før ” selector er kjent. Det endrer fargene på begge kantene for å gjøre dem unike. Trinn-for-trinn prosedyren gitt nedenfor for å legge til en dobbel kant med forskjellige farger:

Trinn 1: Legg til Div Element og tildel klasser

I HTML-filen legger du til div-elementet i -taggen og tilordner en ' klasse ' med navnet på ' dobbel kant '. Brukere kan også lage sitt eget klassenavn:

< div klasse = 'dobbeltgrense' >

< / div >

Trinn 2: Lag stiltag

I dette trinnet oppretter du en del for klassen ' dobbel kant ' og lag den til én kopi med ' :før ”-velger. På denne måten vil CSS-egenskapene bli brukt på våre klasser:

< stil >

.dobbelt- grense {

}

.dobbelt- grense :før {

}

< / stil >

Trinn 3: Legg til stiler til klassen

CSS-egenskapene gjelder for div-elementet som har en klasse på ' dobbel kant '. Følgende stiler er nevnt nedenfor:

.dobbelt- grense {

bakgrunn- farge : #ccc;

grense : 4px solid grønn;

polstring: 50px;

bredde : 16px;

høyde : 16px;

stilling: pårørende;

margin: 0 auto;

}

Beskrivelsen av CSS-egenskaper er gitt nedenfor:

Først legger du til ' bakgrunnsfarge ' som er grå og ' grense ” på 4px vekt og grønn farge.
« polstring ” på 50px for å skape det indre rommet på 50px fra alle sider.
Til slutt, ' bredde ' og ' høyde' på 16 px. Også ' margin ” er 0 auto, noe som betyr at topp- og bunnmarger vil være null og venstre.

Nettsiden ser slik ut:

Utgangen viser at rammen er brukt på 'div'.

Trinn 4: Tillegg av CSS-velger

Gå nå mot den andre boksen i stiltaggen som har ' :før ” velger vedlagt, og skriv koden nedenfor:

.dobbelt- grense :før {

bakgrunn : ingen;

grense : 4px helt blått;

innhold : '' ;

posisjon: absolutt;

topp: 4px;

venstre: 4px;

høyre: 4px;

bunn: 4px;

}

Egenskapene er forklart nedenfor:

Bruke ' posisjon ” egenskap for å gjøre posisjonen til et element fast.
Etter det, ' topp, venstre, høyre og bunn ” definerer marginen til det nyopprettede elementet fra det opprinnelige.
En CSS-velger kalt ': før ” legger til innhold foran et valgt element.

Utgangen ser slik ut:

Det er slik en dobbel kant kan legges til med forskjellige farger.

Konklusjon

For å legge til en dobbel kantlinje, lag først et div-element og tilordne det til en klasse. Deretter legger du til CSS ' posisjon ” egenskap som må settes til relativ. Deretter legger du til CSS-velgeren ':before' slik at brukere kan legge til innhold før et valgt element. Denne veiledningen har demonstrert bruken av doble rammer med forskjellige farger.

Hvordan legge til en dobbel kant med forskjellige farger?