CSS-kanter og -konturer er værdifulde værktøjer for webdesignere, der ønsker at tilføje flair til et websted. De er nemme at bruge, når du først ved, hvordan de fungerer, og de er alsidige nok til at opfylde en lang række behov. Lad os se på CSS-grænserne for at se, hvor du skal starte.

Hvad er forskellen mellem en grænse og en kontur i CSS?

CSS-konturer og -kanter danner to af de ydre lag af CSS-boksmodellen, der sidder mellem grænser og marginer. Selvom disse egenskaber ligner hinanden, har de forskellige værdier og formål.

For det første sidder CSS-konturer uden for grænserne. Det betyder, at de kan overlappe med indhold uden for det element, du anvender dem på. Sammen med dette ændrer CSS-grænser dimensionerne af et element, men konturerne gør det ikke.

Hvis du har svært ved at visualisere kant- og konturstile, kan du bruge din browserens udviklingsværktøjer til fejlretning dem.

CSS Border & Outline Shared Property Værdier

På trods af deres forskelle deler CSS-grænser og -konturer nogle af deres værdier. Den stenografi, du bruger til hver, er også meget ens.

instagram viewer

CSS Border & Outline Shorthand

Ligesom andre komplekse CSS-egenskaber har både grænser og konturer stenografi til rådighed. Begge disse egenskaber deler det samme format for deres stenografiindstillinger, og det ser sådan ud.

grænse: breddestilfarve;
omrids: breddestilfarve;

Dette skaber regler, der ser sådan ud, når de er i aktion. Selvfølgelig dækker denne stenografi dog ikke alle de tilgængelige værdier for disse egenskaber.

kant: 10px ensfarvet blå;
omrids: 20px fast rød;

Disse stenografiske CSS-kant- og konturregler resulterer i en tynd blå kant med en tyk rød kontur.

Som andre stenografiske CSS-egenskaber kan du også bruge individuelle egenskaber til at opnå de samme resultater.

CSS-kantbredde og konturbredde

Kant- og konturbredder er valgfri CSS-egenskabsværdier, der angiver tykkelsen af ​​de kanter og konturer, du bruger. Formatet for disse egenskaber er det samme.

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

Kanter gør det muligt at indstille individuelle bredder for hver side af elementet, men konturerne gør det ikke. Du kan læse mere om dette i de følgende afsnit.

CSS kant-stil og omrids-stil

CSS-kanter og -konturer findes i en række forskellige stilarter. Solide kanter er de mest almindelige, men du kan være kreativ med den måde, du bruger kanter og konturer.

grænse-stil: solid;
outline-style: prikket;

Du kan finde en komplet liste over de forskellige CSS-kant- og konturstile i slutningen af ​​denne artikel.

CSS-kantfarve og konturfarve

Som med andre farvebaserede CSS-egenskaber accepterer kanter og konturer alle lovlige CSS-farver. Dette inkluderer hex-koder, RGB-koder, stenografifarver og mere.

kant-farve: blå;
konturfarve: #ff0000;

Du kan også bruge farvegradienter, når du arbejder med CSS-kanter og -konturer.

CSS grænseegenskabsværdier

Sammen med deres fælles ejendomsværdier har grænser og konturer også unikke værdier at udforske. CSS-grænser har to unikke egenskaber, der er værd at lære.

CSS grænse-radius

Tilføjelse af en radius til et elements kant giver dig meget kontrol over dets form. Hvert hjørne af et element kan have en anden radius, og denne egenskab kan indstilles, selv når kant-stil er sat til ingen.

kant-radius: 20px;

Du kan indstille en enkelt værdi for at ændre radius af alle hjørner.

Du kan også opdele hjørnerne i grupper øverst til venstre/nederst til højre og øverst til højre/nederst til venstre.

kant-radius: 10px 20px;

Dette gør det nemt at skabe interessante former med dine HTML-elementer.

Endelig kan du indstille hvert hjørne til at have sin egen radius.

kant-radius: 10px 20px 30px 40px;

Disse værdier gælder med uret fra øverste venstre hjørne.

Egenskaber for CSS-kantside

I modsætning til konturer kan du indstille hver side af en kant til at have en unik værdi for mange af dens egenskaber. Dette gør det muligt at give hver side af dit element en forskellig bredde.

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

Du kan også indstille uafhængige CSS-kantstile for hver side af et element.

grænse-venstre-stil: solid;
grænse-højre-stil: prikket;
border-top-stil: stiplet;
border-bottom-stil: dobbelt;

Og du kan ændre farven på hver side, hvis du vil.

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

CSS-kantsider fungerer med den almindelige stenografi for at kombinere på denne måde.

kant-venstre: 10px ensfarvet blå;
grænse-højre: 20px prikket #00ff00;
border-top: 30px stiplet #ff0000;
grænse-bund: 40px dobbeltrgb(0, 0, 255);

CSS Outline egenskabsværdier

Ligesom CSS-grænser har konturer deres egen unikke egenskab; konturforskydning.

CSS-konturforskydning

Tilføjelse af en offset til en kontur skaber et mellemrum mellem sig selv og hovedelementet. Denne offset skal være den samme for hver side af omridset, og egenskaben accepterer kun én værdi.

konturforskydning: 10px;

Dette kan være en smart måde at gøre brug af en tredje kant til dine elementer, der matcher din baggrundsfarve.

CSS Border & Outline Styles

Både kanter og konturer har brug for en stil for at fungere. Der er ti tilgængelige stilarter at vælge imellem, inklusive kanter, der slet ikke vises.

grænse-stil: solid;
border-style: prikket;
grænse-stil: stiplet;
grænse-stil: rille;
grænse-stil: højderyg;
border-stil: dobbelt;
grænse-stil: indsat;
grænse-stil: begyndelse;
border-style: skjult;
grænse-stil: ingen;

Kanter deler de samme stilarter med konturer, kun med konturstil indstillet som egenskaben.

Sådan bruges CSS-grænser og konturer

Kontur og grænser er fantastiske designværktøjer til webstedsskabere. Du kan definere udseendet og følelsen af ​​dit websted med disse CSS-egenskaber, men du skal være kreativ.