Grensen er en av de fantastiske egenskapene til CSS som brukes til å spesifisere elementets grense. CSS tillater utviklere å legge til grenser rundt elementet ved hjelp av "grense”Eiendom. Dessuten kan brukere bruke mer enn en grense rundt elementet med de samme fargene og forskjellige farger ved å bruke ":før”Og“:etter”CSS -velgere.

Denne opplæringen vil lære deg å bruke dobbeltgrensen med forskjellige farger ved å bruke CSS -egenskapene.

Hvordan du bruker dobbel kant med forskjellige farger i CSS?

For å bruke dobbeltgrensen med forskjellige farger, sjekk ut de gitte instruksjonene.

Trinn 1: Sett inn overskrift

Opprinnelig sett inn en overskriftskode ved å bruke "

" stikkord. Denne taggen brukes til å spesifisere overskriften på nivå en.

Trinn 2: Lag en div beholder

Deretter lager du en DIV -beholder ved hjelp av “" stikkord. Inne i Div -taggen, legg til en klasse “dobbeltkjørsler”.

Trinn 3: Legg til tekst i avsnitt

Bruk deretter “

”Element og tilordne det en klasse”grense”. Etter det, legg inn teksten mellom "

Linuxhint Ltd UK

Linuxhint gir innholdet for forskjellige kategorier, inkludert Docker, HTML/CSS, Discord, PowerShell, Windows, GitHub og mange flere.

Det kan observeres at teksten i avsnittet er lagt til vellykket:

Trinn 4: Få tilgang til “Div” -element

Få tilgang til “div” -beholderen ved hjelp av den tildelte klassen “.dobbeltkjørsler”.

Trinn 5: Legg til enkelt kant

For å legge til en enkelt kant, bruk de gitte egenskapene:

.dobbeltkjørsel
Posisjon: relativ;
bakgrunnsfarge: RGB (59, 194, 247);
grense: 4px fast RGB (255, 113, 113);
polstring: 1em;
Margin: 0 Auto;
Høyde: 10M;
Bredde: 14M;

I den gitte kodeblokken:

• “posisjon”Angir elementets posisjon. For eksempel har vi satt "slektning”Posisjon til å plassere den i forhold til sin normale stilling.
• “bakgrunnsfarge”Eiendom som brukes til å sette fargen på elementene fra baksiden.
• “grense”Brukes til å tildele en grense rundt elementet.
• “polstring”Angir et rom rundt elementets innhold.
• “margin”Tildeler tomt rom rundt det definerte elementets grense.
• “høyde”Definerer høyden på elementet.
• “bredde”Spesifiserer for å stille inn bredden på elementet.

Som et resultat vil grensen bli lagt slik:

Trinn 6: Legg til dobbelt kant

Få tilgang til klassen ved hjelp av klassenavnet sammen med ":før”Selector. Etter det, bruk følgende egenskaper:

.dobbeltegrense: Før
Bakgrunn: Ingen;
Grense: 4px Solid RGB (19, 18, 18);
innhold: "";
Display: Block;
Posisjon: Absolutt;
Topp: 5px;
Venstre: 5px;
Til høyre: 5px;
Bunn: 5px;

Beskrivelsen av overkodede egenskaper er som følger:

• “grense”Eiendom brukes her for å sette inn en annen kant rundt elementet. Her, "RGB”Verdi tildeler en annen farge på grensen.
• “innhold”Eiendom brukes med“:før”Og“: AFTER ”pseudo-elementer for å sette inn de opprettede materialene.
• “vise”Bestemmer hvordan et element ser ut.
• Her, “posisjon”Er satt som“Absolutt”, Som betyr at stillingen er fast eller absolutt.
• “topp”Eiendom definerer elementets øverste plassering.
• “venstre”Angir elementets posisjon på venstre side.
• “Ikke sant”Brukes til å spesifisere riktig plassering av et element.
• “bunn”Brukes til å spesifisere bunnposisjonen til et element:

Det kan observeres at vi har lagt til dobbeltkanten rundt elementet med hell.

Konklusjon

For å bruke dobbeltgrensen med forskjellige farger i CSS, oppretter du først en DIV-beholder og tildeler den en klasse "dobbeltkorner". Deretter får du tilgang til elementet etter klasse og bruk CSS -egenskaper, inkludert "grense”,“posisjon" som "slektning" og andre. Så får du igjen elementet etter klassenavn sammen med ":før”Valg og bruk“grense”Eiendom med stillingen som“Absolutt”. Dette innlegget har lært deg metoden for å bruke doble grenser med forskjellige farger i CSS.