CSS Border Shorthand -eiendom

CSS Border Shorthand -eiendom

Shorthand -egenskapene til CSS har en tendens til å utføre flere egenskaper samtidig. CSS -grensen for korthåndsegenskap lar deg endre bredden, stilen og fargen på grensen helt. Denne artikkelen gir en demonstrasjon av arbeidet med grensen for korthet. Dessuten illustreres forskjellige eksempler for å få hands-on the Border Shorthand-eiendommen.

Hvordan grensen Shorthand -eiendom fungerer

CSS -grensen til Shorthand -eiendommer basert på følgende syntaks:

velger kant: bredde stil farge;

I syntaks ovenfor,

  • de velger kan være et hvilket som helst element, eller det kan referere til klassen i CSS
  • de bredde refererer til bredden på grensen og kan settes i PX, EM, %. PX setter standarden og EM viser resultatet som refererer til PX -verdien. For eksempel, hvis kroppen har PX -verdien tilsvarer 4px, vil det være lik 1em, på samme måte, for 8px ville det være 2em.
  • de stil representerer grensens stil, og den kan være prikket, stiplet, solid, dobbel, strek, spor, skjult, innsatt, begynnelsen, ingen.
  • de farge Eiendom gir farge til grensene, og fargen kan leveres ved å bruke det nøyaktige navnet (rød, blå), ved å bruke den heksadesimale verdien av fargen ved å bruke RGB/RGBA -mønsterskjemaet.

Ovennevnte diskusjon må ha hjulpet deg med å få konseptet CSS -grensen til korthet eiendom.

Hvordan du bruker CSS -grensen til Shorthand -eiendommen

Grensen til grensenes grunnleggende arbeid er gitt i delen ovenfor. Her vil vi utøve få eksempler som demonstrerer bruken av CSS -grenseeiendommen.

Eksempel 1

Følgende kode praktiseres som bruker CSS -grensen for korthet.






Grense -Shorthand -eiendom




Velkommen til Linuxhint


Velkommen til Linuxhint


Beskrivelsen av koden er gitt nedenfor:

  • To CSS -klasser er opprettet kalt “One” og “Two”
  • "Én" -klassen bruker grensen til korthet med en bredde på 2px, stilen er stiplet, og fargen er Darkblue
  • "Two" -klassen praksis grensen til kortet med følgende verdier: bredden er 2px, stilen er prikket, og grensefargen er rød
  • De andre egenskapene i klassen "en" og "to" refererer til divene som brukes i kroppen.
  • To DIV -tagger brukes i kroppen, den første DIV -taggen bruker en "én" klasse av CSS, og den andre DIV -taggen bruker en "to" klasse av CSS.

Bildet av koden er gitt nedenfor;

Utgangen fra ovennevnte kode er gitt nedenfor:

Eksempel 2

Grensen Shorthand -eiendom aksepterer tre parametere, og bruken deres er gitt i eksemplet ovenfor. Her vurderer vi bare "stilen med farge" og "stil med bredde" av grensen til korthåndsegenskapen ved å bruke følgende kode.






Grense -Shorthand -eiendom




Velkommen til Linuxhint



Velkommen til Linuxhint



Beskrivelsen av koden er gitt nedenfor:

  • To CSS -klasser er opprettet kalt “Prim” og “Sec”
  • "Prim" -klassen inneholder stilen og fargen på grensen Shorthand -eiendommen
  • "SEC" -klassen bruker bredden og stilen
  • I kroppen opprettes to avsnitt som er tilknyttet hver CSS -klasse

Bildet av koden vises nedenfor:

Utgangen fra ovennevnte kode er vist nedenfor:

Fra eksemplene illustrert ovenfor, ville du ha lært funksjonaliteten til grensen til korthet i forskjellige scenarier.

Konklusjon

CSS-grensen for korthåndsegenskap består av tre grenseegenskaper, grensebredde, grensestil og grensefarge. Denne artikkelen gir en detaljert guide til CSS -grensen Shorthand -eiendommen. Arbeidet med Border Shorthand -eiendom forklares kort hvor du vil få en grunnleggende forståelse av denne eiendommen. Videre er flere eksempler uttalt at implementering av CSS -grensen for korthåndsegenskaper i forskjellige scenarier.