Grensesider i CSS

Grensene omgir et HTML-element for å skille seg ut innholdet i elementet. En grense har antall sider i henhold til det respektive elementet (vanligvis er det fire). Grensesidene i CSS gjør det mulig å representere sidene i spesifikk stil som stiplet, stiplet osv. Denne artikkelen gir en guide for å gi følgende læringsresultater.

• Styling av individuelle grensesider i CSS
• Styling av flere grensesider i CSS

Hvordan style grensesidene i CSS

Denne delen inneholder bruken av Borders Side Property i flere scenarier.

Hvordan style en grenseside i CSS

Denne delen praktiserer egenskapene som heter Border-Top-stil, border-venstre-stil, grensebunnstil og grensen-bottom-stil.

Border-top-stil: verdi; // til style topp kant
border-høyre-stil: verdi; // til stil høyre grense
Border-Bottom-Style: Verdi; // til Style Bottom Border
Border-Left-Style: Verdi; // til stil venstre grense

Verdien av de ovennevnte egenskapene kan være prikket, stiplet, solid, dobbel, spor osv.,

Koden som er gitt nedenfor benytter seg av de ovennevnte egenskapene.

Border-topp-stilen

eiendommen til høyre

Border-Bottom-stil eiendom

Grense-venstre eiendom

Koden blir forklart som,

• Fire CSS -klasser er opprettet kalt “Top”, “Right”, “Bottom” og “Left”
• Hver klasse er assosiert med forskjellige eiendommer som "topp" -klasse bruker grenset-topp-stil og så videre.
• Disse CSS -klassene er deretter innebygd i fire forskjellige avsnitt

Produksjon:

Hvordan sette den samme stilen for alle grensesider

Du må bare nevne ett stilmønster i grensen til CSS. For letthet har vi skrevet syntaks av denne spesifikke egenskapen til grensesiden:

Border-stil: verdi;

Følgende kode setter stilen på hver grenseside til fast.

Velkommen til Linuxhint

Kodebildet er gitt nedenfor:

Produksjon:

Hvordan sette den samme stilen for motsatte grensesider

For å gjøre det, vil følgende syntaks hjelpe deg.

Border-style: Value1 Value2;

Verdien1 vil endre stilen på topp- og bunngrenser mens Value2 refererer til venstre og høyre bunn.

Følgende kode praktiserer denne stylingegenskapen til CSS:

Velkommen til Linuxhint

Topp- og bunngrensene ville være stylet i fast stoff, mens høyre, venstre grenser vil bli prikket.

Bildet av koden er gitt nedenfor:

Produksjon:

Hvordan style grensen ved å bruke tre verdier

Hvis antall verdier er tre, vil 1. og 3. verdier style topp og bunn, mens den andre verdien tilhører høyre/venstre side.

Border-style: Value1 Value2 Value3;

Verdi1 for topp, verdi2 for bunn og verdi3 for venstre/høyre stiler Undersiden. Følgende eksempel bruker syntaks ovenfor for å style tre grensesider:

Velkommen til Linuxhint

Koden stiler toppen, til høyre og bunngrenser til faste, prikkede og stiplet henholdsvis.

Produksjon:

Hvordan sette forskjellige stiler for hver grenseside

Følgende syntaks hjelper til med å endre grensestilen på hver side.

Border-style: Value1 Value2 Value3 Value4;

Verdien1 og Value3 refererer til topp- og bunngrensene, mens verdien2 og verdi4 er for venstre og høyre bunn.

Følgende kodepraksis for å style alle grensesidene i CSS.

Velkommen til Linuxhint

Ovennevnte kode endrer stilen på topp og bunn til solid og prikket. Imidlertid vil høyre og venstre grenser bli stylet og solid og solid.

Bildet av ovennevnte kode er gitt nedenfor:

Produksjon:

Konklusjon

Elementene i HTML kan lukkes i en grense og grensesidene kan manipuleres ved bruk av de forskjellige egenskapene til CSS. Denne artikkelen gir demonstrasjon av grensesider i CSS. Grensesidene kan enten være stiplet, prikket eller solid. Du kan sette samme stil for alle grenser, forskjellige stiler for alle grenser eller sette samme stil for topp/bunn og høyre/venstre. For bedre forståelse har vi også gitt eksemplene som illustrerer ovennevnte scenarios.