CSS border je klíčová vlastnost používaná k charakterizaci a stylizaci ohraničení kolem komponent HTML. Hranice hrají důležitou roli ve složení webových stránek, pomáhají s oddělením, důrazem a stylovým půvabem. V CSS můžete využít několik vlastností souvisejících s ohraničením k ovládání stylu, rozmanitosti, velikosti a tvaru těchto ohraničení. V tomto článku prozkoumáme tyto vlastnosti hranic CSS a jak je skutečně využít.
Vlastnosti ohraničení CSS
Vlastnosti okraje CSS se používají k určení stylu, rozmanitosti, šířky a odlivu a toku okrajů komponenty. Mezi tyto vlastnosti patří:
- hraniční styl
- barva ohraničení
- hranice-šířka
- hraniční poloměr
1) CSS styl ohraničení
Vlastnost Border style se používá k určení typu ohraničení, které chcete na webové stránce zobrazit.
Existují některé hodnoty stylu ohraničení, které se používají s vlastností border-style k definování ohraničení.
| Hodnota | Popis |
|---|---|
| žádný | Nedefinuje žádnou hranici. |
| tečkovaný | Používá se k definování tečkovaného ohraničení. |
| čárkovaná | Používá se k definování čárkovaného okraje. |
| pevný | Používá se k definování pevné hranice. |
| dvojnásobek | Definuje dvě hranice se stejnou hodnotou šířky ohraničení. |
| drážka | Definuje 3D drážkovaný okraj. efekt je generován podle hodnoty barvy ohraničení. |
| hřbet | Definuje 3D rýhovaný okraj. efekt je generován podle hodnoty barvy ohraničení. |
| vložka | Definuje 3D vložený okraj. efekt je generován podle hodnoty barvy ohraničení. |
| začátek | Definuje 3D počáteční hranici. efekt je generován podle hodnoty barvy ohraničení. |
Příklad:
.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 Výstup:
2) CSS šířka okraje
Vlastnost border-width se používá k nastavení šířky ohraničení. Nastavuje se v pixelech. K nastavení šířky ohraničení můžete také použít jednu ze tří předdefinovaných hodnot, tenký, střední nebo tlustý.
Poznámka: Vlastnost border-width se nepoužívá samostatně. Neustále se používá s dalšími vlastnostmi ohraničení, jako je vlastnost „border-style“ k nastavení ohraničení jako prvního, jinak to nebude fungovat.
/* 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 Výstup:
3) CSS border-color
Existují tři strategie pro nastavení barvy okraje.
- Název: Určuje název barvy. Například: 'červená'.
- RGB: Určuje hodnotu RGB barvy. Například: 'rgb(255,0,0)'.
- Hex: Určuje hexadecimální hodnotu barvy. Například: '#ff0000'.
Poznámka: Vlastnost border-color se nepoužívá samostatně. Neustále se používá s dalšími vlastnostmi ohraničení, jako je vlastnost „border-style“ k nastavení ohraničení jako prvního, jinak to nebude fungovat.
Příklad:
.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 Výstup:
