CSS kraštinės yra esminiai svetainių elementai, vaizduojantys įvairių komponentų ir elementų kraštus. CSS kraštinės reiškia linijas, kurios supa elementus ir apibrėžia jų kraštus. Kraštinės gali būti formuojamos, spalvinamos ir nustatomos naudojant CSS ypatybes, tokias kaip kraštinės stilius, kraštinės spalva, kraštinės plotis ir kraštinės spindulys. kraštinės gali būti sudarytos iš viršutinės, dešiniosios, apatinės ir kairiosios kraštinės.
Šiame straipsnyje apie CSS kraštines sužinosime apie CSS sienas, apimsime stiliaus parinktis, praktinius naudojimo atvejus ir geriausią praktiką.
Turinys
javascript visuotinis kintamasis
- Pasienio ypatybės
- Būdai, kaip sukurti kraštinę CSS
- Įprasti kraštinių stiliai
- CSS kraštinių stiliaus pavyzdžiai
- Praktiniai naudojimo atvejai
- CSS sienų naudojimo atvejai
Pasienio ypatybės
CSS suteikia keletą savybių, skirtų tinkinti kraštines:
- ribinio stiliaus : nustato kraštinės tipą (pvz., vientisa, brūkšninė, taškinė).
- kraštinės plotis : nustato kraštinės plotį (pikseliais, taškais arba kitais vienetais).
- kraštinė-spalva : Nurodo kraštinės spalvą.
- pasienio spindulys : Sukuria suapvalintus kampus elementams.
Būdai, kaip sukurti kraštinę CSS
The CSS sienos nuosavybė leidžia sukurti elemento kraštinės stilių, nustatant jo plotį, stilių ir spalvą, leidžiant tinkinti interneto dizaino vizualines ribas.
1. Kraštinės stilius
- CSS krašto viršaus stiliaus ypatybė
- krašto dešinės stiliaus nuosavybė
- apačios apačios stiliaus nuosavybė
- krašto kairiojo stiliaus nuosavybė
2. Krašto plotis
- border-top-width ypatybė
- border-right-width ypatybė
- border-bottom-width ypatybė
- border-left-width ypatybė
3. Kraštinės spalva
- border-top-color Savybė
- border-right-color Savybė
- border-bottom-color Savybė
- border-left-color Savybė
4. Apribokite atskiras puses
5. Sienos spindulio savybė
Įprasti kraštinių stiliai
Kraštinės stiliaus ypatybė nurodo kraštinės tipą. Jokia kita kraštinės ypatybė neveiks nenustačius kraštinės stiliaus.
Toliau pateikiami sienų tipai:
- Taškuotas : sukuria taškų seriją.
- Brūkšniuotas : sudaro punktyrinę liniją.
- Tvirtas : sukuria ištisinę liniją.
- Dvigubas : perteikia dvi lygiagrečias linijas.
- Griovelis ir Ridge : kurkite 3D griovelių ir briaunų efektus.
- Įdėklas ir Pradžioje : pridėkite 3D įterpimo ir pradžios kraštines.
- Nė vienas : pašalina kraštinę.
- Paslėpta : paslepia kraštinę.
Pavyzdžiai CSS kraštinės stiliaus
Šiame pavyzdyje mes naudosime CSS kraštinės stiliaus nuosavybę.
HTML