Grensefarge eiendommer i CSS

Grensefargegenskapen til et element setter fargen på grenser til et element. Grensefargegenskapen kan settes ved å bruke inline, interne og eksterne CSS. Et HTML-element har 4-sidige grenser, grensenfargen lar deg endre alle grensene på en gang eller å fargelegge grensene til motsatte sider.

Grensefargegenskapen aksepterer fargene i flere trender som det nøyaktige navnet på fargene, en heksadesimal representasjon av fargen og RGB/RGBA-representasjonene.

Denne artikkelen gir mulige måter å sette grensefargede egenskaper til et HTML-element.

Hvordan grensefargede eiendom fungerer i CSS

Et element er omgitt av fire grenser, topp, bunn, nedre og øvre. Grensefargede eiendommer i CSS følger syntaksen nedenfor:

borderfarge: verdi;

Tasten for grensenfarge forblir det samme, mens verdien avhenger av brukerkravet og det kan være det nøyaktige fargenavnet, heksadesimal verdi av farge eller RGB/RGBA-kombinasjon.

Hvordan du bruker grensfarge eiendommer i CSS

Denne delen består av flere scenarier for å anvende grensfarge eiendommer i CSS.

Eksempel 1: Bruke RGB -kombinasjonen

I databehandling er RGB (Red Green Blue) den mye brukte standarden når du går gjennom fargestyring. Verdien av R, G og B varierer fra 0 til 255 og hver kombinasjon av verdier returnerer en annen farge.

For eksempel praktiserer følgende HTML -kode den interne CSS -klassen for å angi grensefargen.

Velkommen til Linuxhint

Bildet av ovennevnte kode er gitt nedenfor:

Produksjon:

Eksempel 2: Bruke RGBA -kombinasjon

RGBA (rød, grønn, blå, alfa) er en forlengelse av RGB, og alfa representerer fargenes gjennomsiktighet. Alfaverdien varierer fra 0.0 til 1.0 (0.0 er minst gjennomsiktig og 1.0 er den mest gjennomsiktige). Koden gitt nedenfor praktiserer den interne CSS for å bruke RGBA:

Velkommen til Linuxhint

En CSS-klasse er opprettet kalt “Bor-Color” som inneholder grensefargeegenskapen. Denne klassen brukes deretter i avsnittselementet i kroppen.

Produksjon:

Eksempel 3: Bruke navnet på en farge

Det nøyaktige fargenavnet kan brukes til å spesifisere grensefargen som illustrert i følgende kode

Velkommen til Linuxhint

Ovennevnte HTML -kode inneholder,

• En stilkode for å legge til en CSS-klasse som heter “Bor-Col” for å sette grensefarge
• og det opprettes et avsnitt som er tilknyttet CSS -klassen

Produksjon:

Eksempel 4: Bruke sekvensverdien på fargen

Den heksadesimale verdien av en farge kan også brukes til grensefargen. Følgende kode praktiserer den heksadesimale koden for svart farge for å bruke den til grensefargen:

Velkommen til Linuxhint

En CSS-klasse er definert i ovennevnte kode for å angi grensefargen i heksadesimal format, og et avsnitt opprettes for å bruke den CSS-klassen.

Produksjon:

EKSEMPEL 5: Bruke eiendomsfarge på individuelle grenser

Borderfargegenskapen er inndelt i grensenfargen, grensen-høyre-fargen, grensen-fargen og grensen til venstre for å fargelegge grensesidene. Følgende kode praktiseres for å gi farger til grensesider individuelt.

Toppsiden av grensen er farget

Høyre side av grensen er farget

Undersiden av grensen er farget

Venstre side av grensen er farget

I den ovennevnte koden,

• Fire CSS-klasser er opprettet kalt "Top", "høyre", "bunn" og "venstre" som brukes til å bruke "grensetoppfarge", "grensen-høyre-farge", "Border-Bottom-Color ”, Og“ Border-venstrefarge ”.
• Paragrafens grenser er stylet solid
• Fire avsnitt opprettes, og hver inneholder en CSS -klasse

Produksjon:

Konklusjon

Borderfargegenskapen til CSS muliggjør endringer i grensefargen i henhold til kravene. Dette beskrivende innlegget gir demonstrasjon av å bruke grensefargen eiendom i CSS for å endre fargen på grensen. Det er mange måter å gjøre det på, grensenfargen aksepterer fargene i flere trender som det nøyaktige navnet på fargen, en heksadesimal representasjon av fargen og RGB/RGBA-representasjonene. På slutten ville du ha lært anvendelsen av grensfarge eiendommer i CSS ved å utforske flere scenarier som er angitt i denne guiden.