CSS-kanter og -konturer er verdifulle verktøy for webdesignere som ønsker å legge til stil til et nettsted. De er enkle å bruke når du først vet hvordan de fungerer og er allsidige nok til å dekke et bredt spekter av behov. La oss se på CSS-grensene for å se hvor du bør begynne.

Hva er forskjellen mellom en grense og en disposisjon i CSS?

CSS-konturer og -kanter danner to av de ytre lagene av CSS-boksmodellen, sitter mellom grenser og marger. Selv om disse egenskapene er like, har de forskjellige verdier og formål.

For det første sitter CSS-konturene utenfor grensene. Dette betyr at de kan overlappe med innhold utenfor elementet du bruker dem på. Sammen med dette endrer CSS-grenser dimensjonene til et element, men konturene gjør det ikke.

Hvis du har problemer med å visualisere kant- og konturstiler, kan du bruke din nettleserens utviklingsverktøy for å feilsøke dem.

CSS Border & Outline Shared Property Values

Til tross for forskjellene deres, deler CSS-grenser og konturer noen av verdiene deres. Stenografien du bruker for hver er også veldig lik.

instagram viewer

CSS Border & Outline Shorthand

Som andre komplekse CSS-egenskaper har både grenser og konturer stenografi tilgjengelig. Begge disse egenskapene deler samme format for sine stenografialternativer, og det ser slik ut.

grense: breddestilfarge;
disposisjon: breddestilfarge;

Dette skaper regler som ser slik ut når de er i aksjon. Selvfølgelig, men denne stenografien dekker ikke alle verdiene som er tilgjengelige for disse egenskapene.

kantlinje: 10px helt blå;
disposisjon: 20px solid rød;

Disse stenografiske CSS-kant- og konturreglene resulterer i en tynn blå kant med en tykk rød kontur.

Som andre stenografiske CSS-egenskaper, kan du også bruke individuelle egenskaper for å oppnå de samme resultatene.

CSS-kantbredde og konturbredde

Kant- og konturbredder er valgfrie CSS-egenskapsverdier som angir tykkelsen på kantene og konturene du bruker. Formatet for disse egenskapene er det samme.

konturbredde: 20px;
kant-bredde: 10px;

Kanter lar individuelle bredder angis for hver side av elementet, men konturene gjør det ikke. Du kan lese mer om dette i de følgende avsnittene.

CSS-kant- og konturstil

CSS-kanter og konturer kommer i en rekke stiler. Solide grenser er de vanligste, men du kan være kreativ med måten du bruker kanter og konturer.

border-stil: solid;
disposisjon-stil: prikkete;

Du kan finne en fullstendig liste over de forskjellige CSS-kant- og konturstilene på slutten av denne artikkelen.

CSS-kantfarge og konturfarge

Som med andre fargebaserte CSS-egenskaper, aksepterer kantlinjer og konturer alle lovlige CSS-farger. Dette inkluderer hex-koder, RGB-koder, stenografifarger og mer.

kant-farge: blå;
konturfarge: #ff0000;

Du kan også bruke fargegradienter når du arbeider med CSS-kanter og -konturer.

CSS-grenseegenskapsverdier

Sammen med deres felles eiendomsverdier har grenser og konturer også unike verdier å utforske. CSS-grenser har to unike egenskaper som er verdt å lære.

CSS kantradius

Å legge til en radius til et elements kant gir deg mye kontroll over formen. Hvert hjørne av et element kan ha en forskjellig radius, og denne egenskapen kan settes selv når kantlinje er satt til ingen.

border-radius: 20px;

Du kan angi én enkelt verdi for å endre radiusen til alle hjørner.

Du kan også dele hjørnene inn i grupper øverst til venstre/nederst til høyre og øverst til høyre/nederst til venstre.

kantradius: 10px 20px;

Dette gjør det enkelt å lage interessante former med HTML-elementene dine.

Til slutt kan du angi at hvert hjørne skal ha sin egen radius.

kantradius: 10px 20px 30px 40px;

Disse verdiene gjelder med klokken fra øverste venstre hjørne.

CSS-egenskaper på kantsiden

I motsetning til konturer, kan du angi at hver side av en kantlinje skal ha en unik verdi for mange av egenskapene. Dette gjør det mulig å gi hver side av elementet en forskjellig bredde.

kantlinje-venstre-bredde: 10px;
kant-høyre-bredde: 20px;
border-top-width: 30px;
border-bottom-width: 40px;

Du kan også angi uavhengige CSS-kantstiler for hver side av et element.

border-venstre-stil: solid;
border-right-stil: stiplet;
border-top-stil: stiplet;
border-bottom-stil: dobbelt;

Og du kan endre fargen på hver side hvis du vil.

kant-venstre-stil: blå;
border-right-stil: #ff0000;
border-top-stil: #00ff00;
kant-bunn-stil: rgb (0, 0, 255);

CSS-kantsider fungerer med den vanlige stenografien for å kombinere slik.

kantlinje-venstre: 10px solid blå;
grense-høyre: 20px prikkete #00ff00;
border-top: 30px stiplet #ff0000;
border-bottom: 40px dobbeltrgb(0, 0, 255);

CSS-oversiktsegenskapsverdier

I likhet med CSS-grenser har konturene en unik egenskap; konturforskyvning.

CSS-konturforskyvning

Å legge til en forskyvning til en disposisjon skaper et mellomrom mellom seg selv og hovedelementet. Denne forskyvningen må være den samme for hver side av omrisset, og egenskapen godtar bare én verdi.

konturforskyvning: 10px;

Dette kan være en fin måte å bruke en tredje kant for elementene dine som matcher bakgrunnsfargen din.

CSS kant- og konturstiler

Både grenser og konturer trenger en stil for å fungere. Det er ti tilgjengelige stiler å velge mellom, inkludert kantlinjer som ikke vises i det hele tatt.

border-stil: solid;
border-stil: prikkete;
border-style: stiplet;
border-stil: groove;
border-stil: ås;
border-stil: dobbelt;
border-stil: innfelt;
border-style: begynnelse;
border-style: skjult;
border-stil: ingen;

Kanter deler samme stiler med konturer, bare med konturstil satt som egenskapen.

Hvordan bruke CSS-grenser og konturer

Kontur og kantlinjer er flotte designverktøy for nettstedskapere. Du kan definere utseendet og følelsen til nettstedet ditt med disse CSS-egenskapene, men du må være kreativ.