CSS kraštinė yra pagrindinė ypatybė, naudojama apibūdinti ir formuoti kraštines aplink HTML komponentus. Sienos užima svarbią vietą kuriant svetainę, padeda atskirti, pabrėžti ir padaryti stilingą patrauklumą. CSS galite naudoti kelias su kraštinėmis susijusias ypatybes, kad galėtumėte valdyti šių kraštinių stilių, įvairovę, dydį ir formą. Šiame straipsnyje mes ištirsime šias CSS sienų savybes ir kaip jas iš tikrųjų panaudoti.
CSS sienų ypatybės
CSS kraštinės savybės naudojamos komponento kraštinių stiliui, įvairovei, pločiui ir atoslūgiui nustatyti. Šios savybės apima:
- ribinio stiliaus
- kraštinė-spalva
- kraštinės plotis
- pasienio spindulys
1) CSS kraštinės stiliaus
Ypatybė Border style naudojama nurodyti kraštinės tipą, kurį norite rodyti tinklalapyje.
Yra keletas kraštinių stiliaus reikšmių, kurios naudojamos su kraštinės stiliaus ypatybe apibrėžiant kraštinę.
| Vertė | apibūdinimas |
|---|---|
| nė vienas | Tai neapibrėžia jokios sienos. |
| taškuotas | Jis naudojamas taškinei kraštinei apibrėžti. |
| punktyriškai | Jis naudojamas brūkšninei kraštinei apibrėžti. |
| kietas | Jis naudojamas tvirtai sienai apibrėžti. |
| dvigubai | Jis apibrėžia dvi kraštines, turinčias tą pačią kraštinės pločio reikšmę. |
| griovelis | Tai apibrėžia 3D griovelio kraštą. efektas sukuriamas pagal kraštinės spalvos reikšmę. |
| ketera | Ji apibrėžia 3D briaunos kraštą. efektas sukuriamas pagal kraštinės spalvos reikšmę. |
| intarpas | Tai apibrėžia 3D įterptą kraštą. efektas sukuriamas pagal kraštinės spalvos reikšmę. |
| pradžioje | Jis apibrėžia 3D pradžios kraštą. efektas sukuriamas pagal kraštinės spalvos reikšmę. |
Pavyzdys:
.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 Išvestis:
2) CSS kraštinės plotis
Ypatybė border-width naudojama kraštinės pločiui nustatyti. Jis nustatytas pikseliais. Norėdami nustatyti kraštinės plotį, taip pat galite naudoti vieną iš trijų iš anksto nustatytų reikšmių – plonas, vidutinis arba storas.
Pastaba: kraštinės pločio ypatybė nenaudojama viena. Jis nuolat naudojamas su kitomis pasienio ypatybėmis, pvz., „border-style“ ypatybe, kad pirmiausia būtų nustatyta siena, kitaip ji neveiks.
/* 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 Išvestis:
3) CSS kraštinės spalva
Yra trys kraštinės spalvos nustatymo strategijos.
- Pavadinimas: nustato spalvos pavadinimą. Pavyzdžiui: „raudona“.
- RGB: nustato spalvos RGB vertę. Pavyzdžiui: „rgb(255,0,0)“.
- Hex: Tai nustato spalvos šešioliktainę vertę. Pavyzdžiui: „#ff0000“.
Pastaba: kraštinės spalvos ypatybė nenaudojama viena. Jis nuolat naudojamas su kitomis pasienio ypatybėmis, pvz., „border-style“ ypatybe, kad pirmiausia būtų nustatyta siena, kitaip ji neveiks.
Pavyzdys:
.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 Išvestis:
