CSS-kanter och konturer är värdefulla verktyg för webbdesigners som vill lägga till stil på en webbplats. De är lätta att använda när du väl vet hur de fungerar och är tillräckligt mångsidiga för att möta ett brett spektrum av behov. Låt oss titta på CSS-gränser för att se var du bör börja.

Vad är skillnaden mellan en gräns och en kontur i CSS?

CSS-konturer och gränser bildar två av de yttre lagren av CSS-boxmodellen, sittande mellan gränser och marginaler. Även om dessa egenskaper är lika, har de olika värden och syften.

För det första sitter CSS-konturer utanför gränserna. Det betyder att de kan överlappa med innehåll utanför det element du tillämpar dem på. Tillsammans med detta ändrar CSS-gränser dimensionerna för ett element men konturerna gör det inte.

Om du har svårt att visualisera kant- och konturstilar kan du använda din webbläsarens utvecklingsverktyg för att felsöka dem.

CSS Border & Outline Värden för delad egendom

Trots deras skillnader delar CSS-gränser och konturer några av deras värderingar. Stenografin du använder för varje är också väldigt lik.

instagram viewer

CSS Border & Outline Shorthand

Liksom andra komplexa CSS-egenskaper har både gränser och konturer tillgängliga stenografi. Båda dessa egenskaper delar samma format för sina stenografialternativ och det ser ut så här.

gräns: breddstilFärg;
skissera: breddstilFärg;

Detta skapar regler som ser ut så här när de är i aktion. Naturligtvis täcker denna stenografi inte alla värden som finns tillgängliga för dessa egenskaper.

kant: 10px fast blå;
kontur: 20px fast röd;

Dessa stenografiska CSS-kanter och konturregler resulterar i en tunn blå kant med en tjock röd kontur.

Precis som andra stenografiska CSS-egenskaper kan du också använda enskilda egenskaper för att uppnå samma resultat.

CSS-kantbredd och konturbredd

Kant- och konturbredder är valfria CSS-egenskapsvärden som anger tjockleken på gränserna och konturerna du använder. Formatet för dessa egenskaper är detsamma.

konturbredd: 20px;
kantbredd: 10px;

Kanter gör att individuella bredder kan ställas in för varje sida av elementet, men konturerna gör det inte. Du kan läsa mer om detta i följande avsnitt.

CSS kant- och konturstil

CSS-kanter och konturer finns i en mängd olika stilar. Fasta gränser är vanligast, men du kan vara kreativ med hur du använder gränser och konturer.

border-style: solid;
konturstil: prickig;

Du kan hitta en fullständig lista över de olika CSS-kant- och konturstilarna i slutet av den här artikeln.

CSS kantfärg & konturfärg

Precis som med andra färgbaserade CSS-egenskaper accepterar kanter och konturer alla lagliga CSS-färger. Detta inkluderar hex-koder, RGB-koder, stenografifärger och mer.

kantfärg: blå;
konturfärg: #ff0000;

Du kan också använda färggradienter när du arbetar med CSS-kanter och konturer.

CSS-gränsegenskapsvärden

Tillsammans med deras delade egendomsvärden har gränser och konturer också unika värden att utforska. CSS-gränser har två unika egenskaper som är värda att lära sig.

CSS gränsradie

Att lägga till en radie till ett elements kant ger dig mycket kontroll över dess form. Varje hörn av ett element kan ha olika radie, och den här egenskapen kan ställas in även när kantlinje är inställd på ingen.

kantradie: 20px;

Du kan ställa in ett enda värde för att ändra radien för alla hörn.

Du kan också dela upp hörnen i grupper upptill vänster/nedre höger och övre höger/nedre vänster.

kantradie: 10px 20px;

Detta gör det enkelt att skapa intressanta former med dina HTML-element.

Slutligen kan du ställa in varje hörn att ha sin egen radie.

kantradie: 10px 20px 30px 40px;

Dessa värden gäller medurs från det övre vänstra hörnet.

CSS-gränsegenskaper

Till skillnad från konturer kan du ställa in varje sida av en ram så att den har ett unikt värde för många av dess egenskaper. Detta gör det möjligt att ge varje sida av ditt element olika bredd.

kant-vänster-bredd: 10px;
kant-höger-bredd: 20px;
border-top-width: 30px;
border-bottom-width: 40px;

Du kan också ställa in oberoende CSS-kantstilar för varje sida av ett element.

kant-vänster-stil: solid;
border-right-stil: prickig;
border-top-style: streckad;
border-bottom-stil: dubbel;

Och du kan ändra färgen på varje sida om du vill.

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

CSS-kantsidor fungerar med den vanliga stenografin för att kombinera så här.

kant-vänster: 10px fast blått;
gräns-höger: 20px prickade #00ff00;
border-top: 30px streckade #ff0000;
border-bottom: 40px dubbelrgb(0, 0, 255);

CSS-översiktsegenskapsvärden

Liksom CSS-gränser har konturer en egen unik egenskap; konturförskjutning.

CSS-konturförskjutning

Att lägga till en förskjutning till en kontur skapar ett mellanrum mellan sig själv och huvudelementet. Denna offset måste vara densamma för varje sida av konturen, och egenskapen accepterar bara ett värde.

konturförskjutning: 10px;

Detta kan vara ett snyggt sätt att använda en tredje kant för dina element som matchar din bakgrundsfärg.

CSS kant- och konturstilar

Både kanter och konturer behöver en stil för att fungera. Det finns tio tillgängliga stilar att välja mellan, inklusive kanter som inte syns alls.

border-style: solid;
border-style: prickig;
border-style: streckad;
border-style: groove;
kant-stil: ås;
border-stil: dubbel;
border-style: infälld;
border-style: början;
border-style: dold;
border-style: ingen;

Kanter delar samma stil med konturer, bara med konturstil inställd som egenskap.

Hur man använder CSS-gränser och konturer

Konturer och gränser är fantastiska designverktyg för webbplatsskapare. Du kan definiera utseendet och känslan på din webbplats med dessa CSS-egenskaper, men du måste vara kreativ.