Hur implementerar jag olika gränser i CSS?

Den här artikeln ger dig en detaljerad och omfattande kunskap om gränser i CSS, deras utformningsaspekter och olika typer.

Gränser används i HTML-sidor för att avgränsa och markera innehåll. När det finns mycket information på en sida och du vill fästa användarens uppmärksamhet på specifika delar, använd sedan gränser runt det innehållet. I den här artikeln om gränser i CSS kommer jag att diskutera följande ämnen:

När ska du använda Borders?

Standardpraxis är att använda CSS-gränsmärken för att definiera gränser i HTML-sidor för:



  • Runt viktiga rubriker
  • För att markera efterskrift eller viktiga anteckningar
  • Att bifoga bilder, illustrationer, citat från människor, videor
  • Att uppmärksamma prissättning, tidslinjer eller sådan viktig information

Du kanske vill läsa om innan du börjar lära dig mer om CSS-gränser.

För en omfattande CSS-handledning, besök Edureka CSS-handledning för nybörjare . Du får ett utmärkt intryck på hur CSS ska användas för att utöka HTML-webbdesign.

Gränser i CSS

CSS-gränser kan tilldelas olika delar av HTML-sidan, oavsett om det är att bifoga rubriker eller stycken. Låt oss börja med ett exempel. Här definierar vi en kant runt rubriken och en annan kant runt stycketexten.

vad är docka och kock
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}

Gräns ​​runt avsnittet också!

Gränser i CSS

Attribut för CSS Border

CSS-gränser har tre huvudattribut till sina

  • stil:Destilattribut definierar mönstret på gränsen.
  • Färg: Färgen kan vara vilken som helst från den uppsättning som definieras av CSS-färger.
  • bredd: Bredden används för att variera kantens tjocklek för att göra den mer framträdande.

I exemplet ovan såg vi att endast ett gränsattribut definierades, det är dess stil. De andra attributen när de inte är definierade tar standardvärden. Det finns ett annat attribut som kallas radie, vilket används mindre ofta. Den används för att göra kanterna på kanten rundade.

  • gräns-stil attribut
Stil Beskrivning
kantstil: solid
gränsstil: dubbel
kant-stil: spår
gräns-stil: ås
kant-stil: infälld
border-style: utgångspunkt
gräns-stil: ingen
border-style: dold
kantstil: prickad
border-style: streckad

Du skulle märka att det också finns alternativet 'ingen gräns' och 'dold gräns'. En utvecklare kan helt enkelt undvika att definiera en gräns, varför uttryckligen definiera den som en 'dold gräns'? Detta görs för rymdanvändning och anpassning till andra element på sidan.

Gränsstilar kan också blandas i ett element. För detta ändamål kan de fyra enskilda gränssidorna definieras separat med olika stilar. Detta kan göras på två sätt. Antingen definiera alla fyra sidorna i en enda tagg. I det här fallet börjar räkningen från den översta raden och rör sig sedan medurs. Alternativt kan var och en av de fyra gränserna definieras i enskilda taggar också. Båda fallen visas i nästa exempel.

Stil Beskrivning
kantstil: prickad streckad solid dubbel

border-top-style: prickad

gräns-höger-stil: streckad

kant-botten-stil: solid

gräns-vänster-stil: dubbel

  • gräns färg attribut

Färgattributet för en kant kan ställas in på flera sätt. Detta liknar inställningen av färg för andra element. Färgerna kan ställas in på något av följande sätt:

  • namn - ange ett färgnamn, som “blå”. Du kan också prova några snygga färgalternativ som “BlanchedAlmond”!
  • Hex - ange ett hex-värde, som “# ff0000”
  • RGB - ställ in RGB-koden. Till exempel betyder rgb (255 255,0) gul.
  • miljö - som 'transparent' eller 'ogenomskinlig'
  • gränsbredd attribut:

Breddegenskapen definierar, som namnet antyder, tjockleken på de fyra gränssidorna. Om ett värde definieras är det för alla sidor, annars kan individuella breddvärden också ställas in.

Bredden kan specificeras i vilken som helst av standardenheten som pixlar ('px'), punkter ('pt') eller i centimeter ('cm'). Du kan också ange bredden med fördefinierade värden 'tjock', 'tunn' och 'medium'.

Stil Beskrivning
kantbredd: 10 pixlar
kantbredd: 0,1 cm
kantbredd: medium
  • gränsradie attribut

Syftet med att definiera radie är att få rundade hörn mot gränsen. Radiefaktorn definierar graden av rundhet. Större värde, mer böjda hörnen blir. Som standardpraxis hålls radievärden mellan 1-3 gånger gränsbredden.

Följande kod genereras:

kantbredd: 10 pixlar
gränsradie: 30 pixlar

Standardvärden för gränsattribut

  • Det enda obligatoriska attributet är stil . Om stilen saknas visas inte gränsen.

  • Om färgen inte anges tas färgen från det underliggande elementet som standardvärde. Till exempel, om textfärgen i ett stycke definieras som ”blå”, skulle standardgränsfärgen också vara blå. Om det inte finns någon färgdefinition ens för elementet är standardfärgen ”svart”.

  • Standardvärdet för bredd är ”medium”.

Definiera gränser i stenografi

Vissa utvecklare föredrar att definiera gränsattribut i en kortfattad tagg med en rad. Detta kortformat hjälper till att minimera kodraderna och expertutvecklare föredrar detta format. Att använda kortformat rekommenderas när gränsdefinitionen är enkel och ganska standardiserad. Men om du behöver markera varje sida av gränsen i en annan stil, måste du hålla fast vid formatet för att definiera enskilda taggar.

Följande kod används:

border-style: streckad
kantfärg: grön
kantbredd: 5 pixlar
kant: streckad grön 5px

hur man installerar php på windows

Poäng att tänka på vid utformning av gränser i CSS

  • Använd inte för många ramar på en sida, det kan vara distraherande och göra det svårt för användaren att fokusera.

  • Det är viktigt att upprätthålla enhetlighet i kantstil och färger. Element i samma hierarkinivå på en sida måste ha liknande kantstil och bredd för enhetlighet. Till exempel om paragraf definieras med solid kant och 5 pixlar bredd, behåll detta format i alla andra paragraf element under webbdesign.

  • Håll dig till en typ av taggdefinitioner. Vissa utvecklare är bekväma med genvägsdefinitioner med alla värden som tilldelats en enda gräns märka. Vissa andra föredrar tydlig lista över alla taggar för bredd, färg och stil. Konventionen är att när detaljerade kantdekorationer krävs på en sida listas de enskilda taggarna separat. Detta hjälper till vid felsökning av sådana anpassade gränsdefinitioner. I normala fall skulle bara en genvägsdefinition göra.

Hoppas att du hittade informationen du letade efter vid CSS-gränser, och wmed detta kommer vi till ett slut på denna artikel om gränserna i CSS.

Kolla in vår som kommer med instruktörsledad live-utbildning och verklig projektupplevelse. Denna utbildning gör dig skicklig i färdigheter för att arbeta med back-end och front-end webbteknik. Det inkluderar utbildning om webbutveckling, jQuery, Angular, NodeJS, ExpressJS och MongoDB.

Har du en fråga till oss? Vänligen nämna det i kommentarsektionen på 'Border in CSS' -bloggen så återkommer vi till dig.