CSS-kant er en nøgleegenskab, der bruges til at karakterisere og style grænserne omkring HTML-komponenter. Grænser spiller en vigtig rolle i hjemmesidesammensætningen og hjælper med at gøre adskillelse, fremhævelse og stilfuld tiltrækning. I CSS kan du bruge nogle få grænserelaterede egenskaber til at kontrollere stilen, variationen, størrelsen og formen af disse grænser. I denne artikel vil vi undersøge disse CSS-grænseegenskaber, og hvordan man virkelig kan bruge dem.
CSS-grænseegenskaber
CSS-kantegenskaberne bruges til at bestemme stilen, variationen, bredden og ebbe og flod af en komponents grænser. Disse egenskaber omfatter:
navn på usa by
- grænse-stil
- kant-farve
- grænse-bredde
- grænse-radius
1) CSS border-stil
Egenskaben Border style bruges til at angive den kanttype, du vil have vist på websiden.
Der er nogle grænsestilsværdier, som bruges sammen med egenskaber i kantstil til at definere en kant.
| Værdi | Beskrivelse |
|---|---|
| ingen | Det definerer ingen grænse. |
| prikket | Det bruges til at definere en stiplet kant. |
| stiplet | Det bruges til at definere en stiplet kant. |
| solid | Det bruges til at definere en fast kant. |
| dobbelt | Den definerer to grænser med samme grænsebreddeværdi. |
| rille | Den definerer en 3D-rillet kant. effekt genereres i henhold til kantfarveværdi. |
| ryg | Den definerer en 3D-kantet kant. effekt genereres i henhold til kantfarveværdi. |
| indsat | Den definerer en 3d indsat kant. effekt genereres i henhold til kantfarveværdi. |
| begyndelsen | Den definerer en 3d-startkant. effekt genereres i henhold til kantfarveværdi. |
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 Produktion:
hvordan man finder skærmstørrelse
2) CSS-grænsebredde
Egenskaben border-width bruges til at indstille grænsens bredde. Det er indstillet i pixels. Du kan også bruge en af de tre foruddefinerede værdier, tynd, medium eller tyk til at indstille bredden af rammen.
Bemærk: Egenskaben for grænsebredde bruges ikke alene. Det bruges konstant sammen med andre grænseegenskaber som 'border-style'-egenskaber for at sætte grænsen først på en anden måde, hvor det ikke virker.
/* 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-kantfarve
Der er tre strategier til at indstille farven på kanten.
- Navn: Det bestemmer farvenavnet. For eksempel: 'rød'.
- RGB: Det bestemmer farvens RGB-værdi. For eksempel: 'rgb(255,0,0)'.
- Hex: Det bestemmer farvens hex-værdi. For eksempel: '#ff0000'.
Bemærk: Egenskaben kant-farve bruges ikke alene. Det bruges konstant sammen med andre grænseegenskaber som 'border-style'-egenskaber for at sætte grænsen først på en anden måde, hvor det ikke virker.
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 Produktion:
