CSS-kantlinje er en nøkkelegenskap som brukes til å karakterisere og style grensene rundt HTML-komponenter. Grenser spiller en viktig rolle i sammensetningen av nettstedet, og hjelper til med å skille, fremheve og stilig lokke. I CSS kan du bruke noen få grenserelaterte egenskaper for å kontrollere stilen, variasjonen, størrelsen og formen til disse kantene. I denne artikkelen vil vi undersøke disse CSS-grensegenskapene og hvordan du virkelig kan bruke dem.
CSS-grenseegenskaper
CSS-grenseegenskapene brukes til å bestemme stilen, variasjonen, bredden og flo og fjære av kantene til en komponent. Disse egenskapene inkluderer:
10 av 100,00
- border-stil
- grensefarge
- kant-bredde
- grense-radius
1) CSS kantlinje
Egenskapen Border style brukes til å spesifisere kanttypen du vil vise på nettsiden.
Det er noen grensestilverdier som brukes med kantlinjeegenskap for å definere en kantlinje.
| Verdi | Beskrivelse |
|---|---|
| ingen | Den definerer ingen grense. |
| prikkete | Den brukes til å definere en stiplet kantlinje. |
| stiplet | Den brukes til å definere en stiplet kantlinje. |
| fast | Den brukes til å definere en solid kantlinje. |
| dobbelt | Den definerer to grenser med samme grensebreddeverdi. |
| spor | Den definerer en 3d-rillet kantlinje. effekten genereres i henhold til kantfargeverdi. |
| rygg | Den definerer en 3d-kantet kant. effekten genereres i henhold til kantfargeverdi. |
| innfelt | Den definerer en 3d-innfelt kantlinje. effekten genereres i henhold til kantfargeverdi. |
| utgangspunktet | Den definerer en 3d-startkant. effekten genereres i henhold til kantfargeverdi. |
Eksempel:
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border Produksjon:
hvordan finne skjermstørrelsen
2) CSS-kantbredde
Border-width-egenskapen brukes til å angi kantlinjens bredde. Den er satt i piksler. Du kan også bruke en av de tre forhåndsdefinerte verdiene, tynn, middels eller tykk for å angi bredden på kanten.
Merk: Border-width-egenskapen brukes ikke alene. Den brukes konstant sammen med andre grenseegenskaper som 'border-style'-egenskap for å sette grensen først på annen måte det ikke vil fungere.
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border Produksjon:
3) CSS-kantfarge
Det er tre strategier for å angi fargen på kanten.
- Navn: Det bestemmer fargenavnet. For eksempel: 'rød'.
- RGB: Den bestemmer RGB-verdien til fargen. For eksempel: 'rgb(255,0,0)'.
- Hex: Det bestemmer hex-verdien til fargen. For eksempel: '#ff0000'.
Merk: Border-color-egenskapen brukes ikke alene. Den brukes konstant sammen med andre grenseegenskaper som 'border-style'-egenskap for å sette grensen først på annen måte det ikke vil fungere.
Eksempel:
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover Produksjon:
