CSS-kant är en nyckelegenskap som används för att karakterisera och utforma gränserna runt HTML-komponenter. Gränser tar en viktig del i webbplatsens sammansättning och hjälper till att göra separation, betoning och elegant lockelse. I CSS kan du använda några gränsrelaterade egenskaper för att kontrollera stilen, variationen, storleken och formen på dessa gränser. I den här artikeln kommer vi att undersöka dessa CSS-gränsegenskaper och hur man verkligen använder dem.
CSS-gränsegenskaper
CSS-gränsegenskaperna används för att bestämma stil, variation, bredd och ebb och flöde för en komponents kanter. Dessa egenskaper inkluderar:
- border-stil
- gräns färg
- gränsbredd
- gräns-radie
1) CSS border-stil
Egenskapen Border style används för att ange den kanttyp som du vill visa på webbsidan.
Det finns några kantstilsvärden som används med kantlinjeegenskap för att definiera en kantlinje.
| Värde | Beskrivning |
|---|---|
| ingen | Den definierar ingen gräns. |
| prickad | Den används för att definiera en prickad kantlinje. |
| streckade | Den används för att definiera en streckad kantlinje. |
| fast | Den används för att definiera en fast kant. |
| dubbel | Den definierar två gränser med samma gränsvärde. |
| räffla | Den definierar en 3D-räfflad kant. effekten genereras enligt kantfärgsvärdet. |
| bergsrygg | Den definierar en 3D-kantad kant. effekten genereras enligt kantfärgsvärdet. |
| infälld | Den definierar en 3D-infälld kantlinje. effekten genereras enligt kantfärgsvärdet. |
| början | Den definierar en 3D-startkant. effekten genereras enligt kantfärgsvärdet. |
Exempel:
.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 Produktion:
2) CSS-kantbredd
Egenskapen border-width används för att ställa in kantens bredd. Den är inställd i pixlar. Du kan också använda ett av de tre fördefinierade värdena, tunn, medium eller tjock för att ställa in bredden på kanten.
Obs! Border-width-egenskapen används inte ensam. Den används ständigt med andra gränsegenskaper som egenskapen 'border-style' för att sätta gränsen först på något annat sätt som det inte fungerar.
/* 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 Produktion:
3) CSS kantfärg
Det finns tre strategier för att ställa in färgen på kanten.
- Namn: Det bestämmer färgnamnet. Till exempel: 'röd'.
- RGB: Det bestämmer färgens RGB-värde. Till exempel: 'rgb(255,0,0)'.
- Hex: Det bestämmer färgens hexadecimala värde. Till exempel: '#ff0000'.
Obs: Egenskapen kantfärg används inte ensam. Den används ständigt med andra gränsegenskaper som egenskapen 'border-style' för att sätta gränsen först på något annat sätt som det inte fungerar.
Exempel:
.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 Produktion:
