CSS-gränser är viktiga element på webbplatser, som representerar kanterna på olika komponenter och element. CSS-gränser refererar till linjerna som omger element och definierar deras kanter. Kanter kan formateras, färgas och dimensioneras med hjälp av CSS-egenskaper som kantstil, kantfärg, kantbredd och kantradie. kanter kan utformas med den övre kanten, den högra kanten, den nedre kanten och den vänstra kanten.
string.valueof
I den här artikeln Borders in CSS kommer vi att lära oss om CSS-gränser, som täcker stylingalternativ, praktiska användningsfall och bästa praxis.
Innehållsförteckning
- Gränsegenskaper
- Sätt att utforma kantlinje i CSS
- Vanliga kantstilar
- Exempel på CSS-kantstil
- Praktiska användningsfall
- Användningsfall för CSS-gränser
Gränsegenskaper
CSS ger flera egenskaper för att anpassa kanter:
- border-stil : Bestämmer typen av kant (t.ex. heldragen, streckad, prickad).
- gränsbredd : Ställer in bredden på kanten (i pixlar, punkter eller andra enheter).
- gräns färg : Anger kantfärgen.
- gräns-radie : Skapar rundade hörn för element.
Sätt att utforma kantlinje i CSS
De CSS-gränsegenskap möjliggör styling av ett elements kant genom att ställa in dess bredd, stil och färg, vilket möjliggör anpassningsbara visuella gränser i webbdesign.
1. Border Style
- Egenskap i CSS-border-top-stil
- gräns-höger-stil Fastighet
- gräns-botten-stil egendom
- gräns-vänster-stil Fastighet
2. Kantbredd
- border-top-width Egenskap
- border-right-width Egenskap
- border-bottom-width Egenskap
- gräns-vänster-bredd Egenskap
3. Kantfärg
- border-top-color Egenskap
- border-right-color Egenskap
- border-bottom-color Egenskap
- border-left-color Egenskap
4. Kantgränsa enskilda sidor
5. Gränsradieegenskap
Vanliga kantstilar
Egenskapen border-style specificerar typen av kantlinje. Ingen av de andra kantegenskaperna fungerar utan att ställa in kantstilen.
Följande är typerna av gränser:
- Prickad : Skapar en serie punkter.
- Streckad : Bildar en streckad linje.
- Fast : Ger en kontinuerlig linje.
- Dubbel : Återger två parallella linjer.
- Räffla och bergsrygg : Skapa 3D-räfflade och räfflade effekter.
- Infälld och Början : Lägg till 3D-infällda och utgående ramar.
- Ingen : Tar bort gränsen.
- Dold : Döljer gränsen.
Exempel av CSS border Style
I det här exemplet kommer vi att använda CSS border-style egendom.
HTML