Borders in CSS | Forklart

Når vi besøker et nettsted, var vi noen ganger vitne til noen vakre rammer rundt teksten som forbedrer brukergrensesnittet og hjelper til med å forbedre interaktiviteten til innholdet. I CSS kalles disse rammene som grensene, og de spiller en betydelig rolle i webdesign. CSS gir flere grenseegenskaper som lar oss sette grensens stil, bredde osv.

Denne oppskrivningen presenterer en omfattende oversikt over følgende grenseegenskaper:

• grensestil: pleide å sette grensens stil som prikket, solid osv.
• grensefarge: pleide å sette grensens farge som rød, #00ff00, etc.
• grensebredde: pleide å sette grensens bredde som tykk, tynn, piksel osv.

Denne artikkelen vil forklare hvordan du bruker hver av de ovennevnte egenskapene ved hjelp av eksempler.

CSS Border-stil eiendom

En eiendom som bestemmer hvordan grensens utseende. CSS Border-stil eiendom gir følgende verdier:

• skjult: Sett den skjulte grensen.
• fast: Sett den solide linjegrensen.
• prikket: spesifiser den stiplede grensen.
• Strikket: Sett den stiplede grensen.
• dobbelt: Angi dobbeltlinjegrensen.
• spor: Bestemmer den 3D -rillede grensen.
• ridge: Setter 3D Ridge Border.
• innsatt: Bestemmer 3D -innsats kant
• utgangspunktet: pleide å sette 3d starter kant

Merk: 3D -effekten av rille, ryggen, innsatt og utgang avhenger av grensens fargeverdi.

Eksempel Koden nedenfor oppretter flere avsnitt og implementerer alle de ovennevnte verdiene for å vise effekten av hver CSS-grensestil:

Html

Avsnitt med skjult grense

Avsnitt med solid kant

Avsnitt med stiplet grense

Avsnitt med stiplet grense

Avsnitt med dobbel grense

Avsnitt med Groove Border

Avsnitt med Ridge Border

Avsnitt med innsatt kant

Avsnitt med begynnelsen av grensen

CSS

.skjult grenser
polstring: 0;
Border-stil: Hidden;

.Solid-land
polstring: 0;
Border-stil: Solid;

.stiplet grense
polstring: 0;
Border-stil: prikket;

.stiplet grense
polstring: 0;
Border-stil: Strikket;

.dobbeltkjørsel
polstring: 0;
Border-stil: dobbelt;

.Groove-grense
polstring: 0;
Border-stil: Groove;

.Ridge-grense
polstring: 0;
Border-stil: Ridge;

.inset-grens
polstring: 0;
Border-stil: Inset;

.utgangsgrense
polstring: 0;
Border-stil: begynnelsen;

Ovennevnte kode vil generere følgende utdata:

CSS Border-Color Property

Som navnet i seg selv indikerer, lar det oss spesifisere grensens farge. Fargen kan spesifiseres ved hjelp av forhåndsdefinerte fargenavn, heksadesimale verdier osv. Fargen på hver side kan modifiseres individuelt ved bruk.

Eksempel La oss vurdere det undergitte kodet som spesifiserer grensefargen ved hjelp av heksadesimal kode:

Html

Et enkelt grensefargeeksempel.

CSS

P
Border-stil: Strikket;
Borderfarge: #00F;

Ovennevnte kode genererer følgende kode:

La oss utvide koden ovenfor litt for å fargelegge hver grenseside på en annen måte.

Html

Et enkelt grensefargeeksempel.

CSS

P
Border-stil: Strikket;
Border-top-Color: #00F;
Border-Bottom-Color: #F00;
grense-venstre-farge: #000;
Border-høyre-farge: #0F0;

Vi får følgende utdata:

CSS-grensen bredde

Grensebreddeegenskapen brukes til å sette bredden på grensen. Grensebreddeegenskapen tar verdier enten når det gjelder piksler, eller en forhåndsdefinert verdi som tykk, tynn osv.

Eksempel La oss vurdere koden nedenfor som spesifiserer grensebredden som 2 piksler:

Html

Et enkelt grensebreddeeksempel.

CSS

P
Border-stil: Solid;
Grensebredde: 2px;

Vi får følgende utdata:

CSS Border-Radius Property

Border-radius-eiendommen spesifiserer en avrundet grense til et element, og lengden bestemmer formen på hjørnene.

Eksempel La oss vurdere koden nedenfor som spesifiserer grensen-radius som 10 piksler:

Html

Et enkelt grense-radiuseksempel.

CSS

P
Grense: 2px faststoff;
Border-Radius: 10px;

Produksjon

Produksjonen verifiserer at grensen-radius-egenskapen gir en avrundet form til grensenes hjørne:

CSS Border Shorthand -eiendom

CSS gir en kortvarig eiendom for grensebredde, stil og farge som lar oss implementere alle disse grenseegenskapene i en enkelt linje.

Eksempel

I den undergitte koden implementerer vi flere egenskaper i en enkelt CSS-linje ved hjelp av Shorthand-egenskap:

Html

Et enkelt eksempel på kortvarig eiendom.

CSS

P
Grense: 3px solid blå;

I stedet for å implementere hver grenseegenskap individuelt, implementerer koden ovenfor grensen,

Utgangen bekreftet at Shorthand -egenskapen implementerte alle tre grenseegenskapene med hell.

Konklusjon

CSS gir grensemeldinger, grensestil og grensefargede egenskaper for å sette henholdsvis grensebredde, grensestil og grensefarge på et HTML-element. Denne oppskrivningen gir en omfattende oversikt over CSS-grenser og diskuterer hvordan du skaper en grense, setter grensefargen, modifiser grensens stil og setter grensebredden ved hjelp av enkle og lettfattelige eksempler.