A CSS-szegély a HTML-összetevők körüli szegélyek jellemzésére és stílusára szolgáló kulcstulajdonság. A szegélyek létfontosságú szerepet töltenek be a webhely összeállításában, segítve az elkülönítést, a hangsúlyt és a stílusos vonzerőt. A CSS-ben néhány szegéllyel kapcsolatos tulajdonságot használhat a szegélyek stílusának, változatosságának, méretének és alakjának szabályozására. Ebben a cikkben megvizsgáljuk ezeket a CSS-szegély-tulajdonságokat, és megvizsgáljuk, hogyan hasznosíthatjuk őket.
for loop in shell script
CSS határ tulajdonságai
A CSS-szegély tulajdonságait arra használják, hogy meghatározzák az összetevők szegélyeinek stílusát, változatosságát, szélességét és apályát. Ezek a tulajdonságok a következők:
- határos stílusban
- határ-szín
- határ-szélesség
- határ-sugár
1) CSS keret stílusú
A Border style tulajdonság a weboldalon megjeleníteni kívánt szegélytípus megadására szolgál.
Vannak olyan szegélystílus-értékek, amelyeket a border-style tulajdonsággal együtt használnak a szegély meghatározásához.
| Érték | Leírás |
|---|---|
| egyik sem | Nem határoz meg semmilyen határt. |
| pontozott | Pontozott szegély meghatározására szolgál. |
| szaggatott | Szaggatott szegély meghatározására szolgál. |
| szilárd | Egy szilárd szegély meghatározására szolgál. |
| kettős | Két szegélyt határoz meg azonos szegélyszélesség értékkel. |
| horony | 3D barázdált szegélyt határoz meg. effektust a keretszín értékének megfelelően generálják. |
| gerinc | 3D-s bordázott szegélyt határoz meg. effektus a keretszín értékének megfelelően generálódik. |
| betét | 3D-s beszúrt szegélyt határoz meg. effektus a keretszín értékének megfelelően generálódik. |
| kezdet | Meghatározza a 3D kezdeti szegélyt. effektus a keretszín értékének megfelelően generálódik. |
Példa:
.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 Kimenet:
adatszerkezet
2) CSS határszélesség
A border-width tulajdonság a keret szélességének beállítására szolgál. Pixelben van beállítva. A szegély szélességének beállításához használhatja a három előre meghatározott érték egyikét is, vékony, közepes vagy vastag.
nyomtat java-ból
Megjegyzés: A border-width tulajdonságot nem használják egyedül. Folyamatosan más szegélytulajdonságokkal együtt használják, mint például a „border-style” tulajdonság, hogy először állítsa be a határt, más módon nem működik.
/* 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 Kimenet:
3) CSS keretszín
Három stratégia létezik a szegély színének beállítására.
- Név: Meghatározza a szín nevét. Például: 'piros'.
- RGB: Meghatározza a szín RGB értékét. Például: 'rgb(255,0,0)'.
- Hex: Meghatározza a szín hatszögértékét. Például: '#ff0000'.
Megjegyzés: A keretszín tulajdonságot nem használják egyedül. Folyamatosan más szegélytulajdonságokkal együtt használják, mint például a „border-style” tulajdonság, hogy először állítsa be a határt, más módon nem működik.
Példa:
.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 Kimenet:
