CSS border je kľúčová vlastnosť, ktorá sa používa na charakterizáciu a úpravu okrajov okolo komponentov HTML. Hranice zohrávajú dôležitú úlohu pri zložení webových stránok, pomáhajú pri vytváraní oddelenia, zdôrazňovania a štýlového pôvabu. V CSS môžete použiť niekoľko vlastností súvisiacich s okrajmi na ovládanie štýlu, odrody, veľkosti a tvaru týchto okrajov. V tomto článku preskúmame tieto vlastnosti hraníc CSS a ako ich skutočne využiť.
Vlastnosti okrajov CSS
Vlastnosti okrajov CSS sa používajú na určenie štýlu, odrody, šírky a odlivu a odlivu okrajov komponentu. Tieto vlastnosti zahŕňajú:
- border-style
- border-color
- hraničná šírka
- hraničný polomer
1) CSS štýl ohraničenia
Vlastnosť Border style sa používa na určenie typu orámovania, ktoré chcete zobraziť na webovej stránke.
Existuje niekoľko hodnôt štýlu okraja, ktoré sa používajú s vlastnosťou štýlu okraja na definovanie okraja.
| Hodnota | Popis |
|---|---|
| žiadny | Nedefinuje žiadnu hranicu. |
| bodkovaný | Používa sa na definovanie bodkovaného okraja. |
| prerušovaná | Používa sa na definovanie prerušovanej hranice. |
| pevný | Používa sa na definovanie pevnej hranice. |
| dvojitý | Definuje dve hranice s rovnakou hodnotou šírky okraja. |
| drážka | Definuje 3D drážkovaný okraj. efekt sa generuje podľa hodnoty farby okraja. |
| hrebeň | Definuje 3D ryhovaný okraj. efekt sa generuje podľa hodnoty farby okraja. |
| vložka | Definuje 3D vložený okraj. efekt sa generuje podľa hodnoty farby okraja. |
| začiatok | Definuje 3D počiatočnú hranicu. efekt sa generuje podľa hodnoty farby okraja. |
Prí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ýkon:
2) CSS šírka ohraničenia
Vlastnosť border-width sa používa na nastavenie šírky okraja. Nastavuje sa v pixeloch. Na nastavenie šírky orámovania môžete použiť aj jednu z troch preddefinovaných hodnôt, tenké, stredné alebo hrubé.
Poznámka: Vlastnosť border-width sa nepoužíva samostatne. Neustále sa používa s inými vlastnosťami ohraničenia, ako je vlastnosť „štýl ohraničenia“ na nastavenie ohraničenia ako prvého, inak to nebude fungovať.
/* 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ýkon:
git status -s
3) CSS border-color
Existujú tri stratégie na nastavenie farby okraja.
- Názov: Určuje názov farby. Napríklad: „červená“.
- RGB: Určuje hodnotu RGB farby. Napríklad: 'rgb(255,0,0)'.
- Hex: Určuje hexadecimálnu hodnotu farby. Napríklad: '#ff0000'.
Poznámka: Vlastnosť border-color sa nepoužíva samostatne. Neustále sa používa s inými vlastnosťami ohraničenia, ako je vlastnosť „štýl ohraničenia“ na nastavenie ohraničenia ako prvého, inak to nebude fungovať.
Prí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ýkon:
