szegély elemek

szegélystílust

border-style tulajdonság meghatározza, hogy milyen típusú határ megjelenítéséhez.

Egyik tulajdonságait a határ nem fogja elérni semmilyen hatása, amíg a border-style tulajdonság nincs beállítva!

Értékek border-style

none: nincs keret

pontozott: Boundary pontok

szaggatott: pontozott átnyúló

szilárd: A szilárd határ

kettős: A kettős határon. A szélessége a kettős határ értékét border-width

groove: Meghatározza a 3D domborított határon. A hatás függ a border-color

gerinc: Meghatározza a 3D barázdált határon. A hatás függ a border-color

betét: Meghatározza a 3D depressziós határon. A hatás függ a border-color

Elöljáróban: Meghatározza a 3D domború határon. A hatás függ a border-color

Szegély szélessége

border-width tulajdonság lehet beállítani a szélessége a határ.

Szélesség beállítása képpontokban, vagy segítségével egy három, előre meghatározott érték: vékony (vékony), közepes (átlagos), vagy vastag (vastag).

Megjegyzés: Az ingatlan „border-width” nem működik, ha önmagában. Használja az első ingatlan „border-style”, hogy az előírt határok.


Próbáld ki magad »
Kattintson a „Próbáld ki magad”, hogy hogyan működik

színhatárait

border-color tulajdonság lehet beállítani a szegély színe. Színes lehet beállítani:

  • neve - adja meg a szín neve, például „vörös”
  • RGB - adja meg az RGB érték, mint a "rgb (255,0,0)"
  • Hex - írja a hexadecimális értéket, például: "# FF0000"

Azt is beállíthatja a szegély színe „átlátható”.

Megjegyzés: Az ingatlan „border-color” nem működik, ha önmagában. Adja meg az első ingatlan „border-style”, hogy az előírt határok.


Próbáld ki magad »
Kattintson a „Próbáld ki magad”, hogy hogyan működik

Border - Egyedi regisztrációs felek

A CSS-ben megadhat eltérő határok különböző oldalain:

p
<
border-top-style: pontozott;
border-jobb-style: szilárd;
border-bottom-style: pontozott;
border-left-style: szilárd;
>


Próbáld ki magad »
Kattintson a „Próbáld ki magad”, hogy hogyan működik

A fenti példa lehet konvertálni alkalmazásával egyetlen tulajdonság:


Próbáld ki magad »
Kattintson a „Próbáld ki magad”, hogy hogyan működik

border-style tulajdonság lehet egy-négy értékeket.

  • border-style: pontozott szaggatott tömör kettős;
    • felső határa - a pont
    • jobb szegély - Broken
    • az alsó határ - dupla
    • bal szélén - pontozott

  • border-style: pontozott tömör kettős;
    • felső határa - a pont
    • A bal és jobb határa - szilárd
    • az alsó határ - dupla

  • border-style: pontozott szilárd;
    • alsó és felső határa - a pont
    • A bal és jobb határa - szilárd

  • border-style: pontozott;
    • mind a négy határon - a pont

border-style tulajdonság a fenti példában. Ugyanakkor azt is működik a tulajdonságok border-width és border-color.

Border - gyors- (rövidítve) ingatlan

Mint látható a fenti példák, a határ van egy csomó tulajdonságait.

Lerövidül a kódot, akkor adja meg az összes határ tulajdonságok egy tulajdonság. Ezt hívják rövidített (vagy csökkenés) az ingatlan.

Rövid tulajdonság a határ tulajdonságok - „határ”:

átnyúló: 5px szilárd piros;


Próbáld ki magad »
Kattintson a „Próbáld ki magad”, hogy hogyan működik

Ha ingatlan határán, annak az értékrendnek a következők szerint:

Átugorhatja értékeket (bár, border-style tulajdonság továbbra is szükség lesz), a legfontosabb dolog -, hogy tartsa a megadott sorrendben.

További példák

Beállítása a stílus az alsó határ
Ez a példa bemutatja, hogyan kell beállítani a stílus az alsó határ.

Beállítása a szélessége a bal oldali szegély
Ez a példa bemutatja, hogyan kell beállítani a szélessége a bal szélén.

Beállítása a határait a négy szín
Ez a példa bemutatja, hogyan kell beállítani a színét a négy szegély. Ezek lehetnek egy és négy színben.

Állítsa be a szín a jobb határ
Ez a példa bemutatja, hogyan kell beállítani a színét a jobb oldali szegélyét.

Minden CSS border tulajdonságok

Kapcsolódó cikkek