Obroba CSS je ključna lastnost, ki se uporablja za karakterizacijo in oblikovanje obrob okrog komponent HTML. Obrobe prevzamejo ključno vlogo pri sestavi spletnega mesta, pomagajo pri ločevanju, poudarjanju in elegantni privlačnosti. V CSS lahko uporabite nekaj lastnosti, povezanih z obrobami, da nadzirate slog, raznolikost, velikost in obliko teh obrob. V tem članku bomo raziskali te lastnosti obrob CSS in kako jih resnično uporabiti.
Lastnosti obrobe CSS
Lastnosti obrob CSS se uporabljajo za določanje sloga, raznolikosti, širine ter oseke in oseke obrob komponente. Te lastnosti vključujejo:
- mejni slog
- barva obrobe
- border-width
- mejni polmer
1) Slog obrobe CSS
Lastnost Slog obrobe se uporablja za določitev vrste obrobe, ki jo želite prikazati na spletni strani.
Obstaja nekaj vrednosti sloga obrobe, ki se uporabljajo z lastnostjo sloga obrobe za definiranje obrobe.
| Vrednost | Opis |
|---|---|
| nič | Ne določa nobene meje. |
| pikčasto | Uporablja se za določitev črtkane obrobe. |
| črtkano | Uporablja se za določitev črtkane obrobe. |
| trdna | Uporablja se za določitev trdne meje. |
| dvojno | Določa dve obrobi z enako vrednostjo širine obrobe. |
| utor | Določa 3D žlebasto obrobo. učinek se ustvari glede na vrednost barve obrobe. |
| greben | Določa 3D grebenasto obrobo. učinek se ustvari glede na vrednost barve obrobe. |
| vložek | Določa 3D vstavljeno obrobo. učinek se ustvari glede na vrednost barve obrobe. |
| začetek | Določa 3D začetno mejo. učinek se ustvari glede na vrednost barve obrobe. |
primer:
.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 Izhod:
2) Širina obrobe CSS
Lastnost border-width se uporablja za nastavitev širine obrobe. Nastavljen je v pikslih. Za nastavitev širine obrobe lahko uporabite tudi eno od treh vnaprej določenih vrednosti, tanko, srednje ali debelo.
Opomba: Lastnost border-width se ne uporablja sama. Nenehno se uporablja z drugimi lastnostmi obrobe, kot je lastnost 'slog obrobe', da najprej nastavi obrobo, kakor koli drugače ne bo delovalo.
/* 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 Izhod:
3) Barva obrobe CSS
Obstajajo tri strategije za nastavitev barve obrobe.
- Ime: Določa ime barve. Na primer: 'rdeča'.
- RGB: Določa RGB vrednost barve. Na primer: 'rgb(255,0,0)'.
- Hex: Določa šestnajstiško vrednost barve. Na primer: '#ff0000'.
Opomba: Lastnost border-color se ne uporablja sama. Nenehno se uporablja z drugimi lastnostmi obrobe, kot je lastnost 'slog obrobe', da najprej nastavi obrobo, kakor koli drugače ne bo delovalo.
primer:
.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 Izhod:
