Hranice CSS sú základnými prvkami webových stránok, ktoré predstavujú okraje rôznych komponentov a prvkov. Okraje CSS označujú čiary, ktoré obklopujú prvky a definujú ich okraje. Orámovanie je možné upravovať, farbiť a meniť veľkosť pomocou vlastností CSS, ako je štýl orámovania, farba orámovania, šírka orámovania a polomer orámovania. orámovanie je možné upraviť s horným okrajom, pravým okrajom, spodným okrajom a ľavým okrajom.
V tomto článku Borders in CSS sa dozvieme o okrajoch CSS, pokrývajúcich možnosti štýlu, praktické prípady použitia a osvedčené postupy.
Obsah
- Vlastnosti okrajov
- Spôsoby štýlu ohraničenia v CSS
- Spoločné štýly hraníc
- Príklady štýlu ohraničenia CSS
- Praktické prípady použitia
- Prípady použitia okrajov CSS
Vlastnosti okrajov
CSS poskytuje niekoľko vlastností na prispôsobenie hraníc:
- border-style : Určuje typ orámovania (napr. plné, prerušované, bodkované).
- hraničná šírka : Nastavuje šírku okraja (v pixeloch, bodoch alebo iných jednotkách).
- border-color : Určuje farbu okraja.
- hraničný polomer : Vytvára zaoblené rohy pre prvky.
Spôsoby štýlu ohraničenia v CSS
The Vlastnosť ohraničenia CSS umožňuje upraviť štýl okraja prvku nastavením jeho šírky, štýlu a farby, čo umožňuje prispôsobiteľné vizuálne hranice vo webovom dizajne.
1. Štýl okrajov
- Vlastnosť štýlu ohraničenia CSS
- Nehnuteľnosť v pravom štýle
- Vlastnosť v štýle border-bottom
- Nehnuteľnosť v štýle vľavo
2. Šírka okraja
- Vlastnosť so šírkou ohraničenia
- Vlastnosť s pravou šírkou ohraničenia
- Vlastnosť border-bottom-width
- Vlastnosť so šírkou vľavo
3. Farba okraja
- border-top-color Vlastnosť
- border-right-color Property
- border-bottom-color Vlastnosť
- border-left-color Vlastnosť
4. Ohraničenie jednotlivých strán
5. Vlastnosť polomeru hranice
Spoločné štýly hraníc
Vlastnosť border-style určuje typ orámovania. Žiadna z ostatných vlastností okraja nebude fungovať bez nastavenia štýlu okraja.
Nasledujú typy hraníc:
- Bodkovaný : Vytvára sériu bodiek.
- Prerušovaná : Vytvára prerušovanú čiaru.
- Pevné : Vytvára súvislú čiaru.
- Dvojité : Vykreslí dve rovnobežné čiary.
- Drážka a Ridge : Vytvárajte 3D drážkované a ryhované efekty.
- Vložka a Začiatok : Pridajte 3D vložené a začiatočné okraje.
- žiadne : Odstráni orámovanie.
- Skryté : Skryje hranicu.
Príklady štýlu ohraničenia CSS
V tomto príklade použijeme vlastnosť štýlu ohraničenia CSS.
HTML