A CSS-szegélyek és körvonalak értékes eszközök a webtervezők számára, akik stílust szeretnének adni egy webhelynek. Könnyen használhatóak, ha ismeri a működésüket, és elég sokoldalúak ahhoz, hogy sokféle igényt kielégítsenek. Nézzük meg a CSS-határokat, hogy megtudjuk, hol érdemes kezdeni.
Mi a különbség a szegély és a körvonal között a CSS-ben?
A CSS körvonalai és szegélyei alkotják a két külső réteget a CSS doboz modell, szegélyek és margók között ülve. Bár ezek a tulajdonságok hasonlóak, eltérő értékekkel és céllal rendelkeznek.
Egyrészt a CSS-vázlatok a határokon kívül helyezkednek el. Ez azt jelenti, hogy átfedhetik azokat az elemeket, amelyekre alkalmaztad őket. Ezzel együtt a CSS-szegélyek megváltoztatják az elem méreteit, de a körvonalak nem.
Ha nehézségei vannak a szegély- és körvonalstílusok megjelenítésével, használhatja a sajátját a böngésző fejlesztői eszközei a hibakereséshez őket.
CSS Border & Outline Shared Property Values
Különbségeik ellenére a CSS-határok és körvonalak bizonyos értékeket képviselnek. Az Ön által használt gyorsírás is nagyon hasonló.
CSS Border & Outline Shorthand
Más összetett CSS-tulajdonságokhoz hasonlóan a szegélyek és a körvonalak is rendelkeznek gyorsírással. Mindkét tulajdonság ugyanazt a formátumot használja a gyorsírási beállításokhoz, és így néz ki.
határ: szélességstílusszín;
vázlat: szélességstílusszín;Ez olyan szabályokat hoz létre, amelyek működés közben így néznek ki. Természetesen ez a rövidítés nem fedi le az ezekhez a tulajdonságokhoz elérhető összes értéket.
szegély: 10px egyszínű kék;
körvonal: 20 képpont egyszínű piros;Ezek a rövidített CSS-szegély- és körvonalszabályok vékony kék keretet eredményeznek, vastag piros körvonallal.
Más gyorsított CSS-tulajdonságokhoz hasonlóan egyedi tulajdonságokat is használhat ugyanazon eredmények eléréséhez.
CSS keret-szélesség és körvonal-szélesség
A szegély- és körvonalszélességek nem kötelező CSS-tulajdonságok, amelyek beállítják a használt szegélyek és körvonalak vastagságát. Ezeknek a tulajdonságoknak a formátuma ugyanaz.
körvonal-szélesség: 20 képpont;
keret szélessége: 10 képpont;A szegélyek lehetővé teszik az egyedi szélességek beállítását az elem mindkét oldalán, de a körvonalak nem. Erről bővebben a következő részekben olvashat.
CSS keret-stílus és körvonal-stílus
A CSS-szegélyek és körvonalak többféle stílusban kaphatók. A tömör szegélyek a leggyakoribbak, de kreatív lehet a szegélyek és a körvonalak használatával.
szegély-stílus: tömör;
körvonal-stílus: pontozott;A különböző CSS-szegély- és vázlatstílusok teljes listája a cikk végén található.
CSS keretszín és körvonalszín
A többi színalapú CSS-tulajdonsághoz hasonlóan a szegélyek és a körvonalak is elfogadnak minden jogi CSS-színt. Ez magában foglalja a hexadecimális kódokat, az RGB kódokat, a gyorsított színeket és egyebeket.
keret színe: kék;
körvonal színe: #ff0000;Használhat színátmeneteket is, amikor CSS-szegélyekkel és körvonalakkal dolgozik.
CSS Border Property Values
A közös tulajdon értékei mellett a határok és a körvonalak egyedi értékeket is rejtenek magukban, amelyeket felfedezni kell. A CSS-szegélyeknek két egyedi tulajdonsága van, amelyeket érdemes megtanulni.
CSS határsugár
Ha egy sugárt ad egy elem szegélyéhez, akkor nagy mértékben szabályozhatja az alakját. Egy elem minden sarkának más-más sugara lehet, és ez a tulajdonság akkor is beállítható, ha a keretstílus nincs értékre állítva.
határsugár: 20 képpont;Beállíthat egyetlen értéket az összes sarok sugarának megváltoztatásához.
A sarkokat a bal felső/jobb alsó és a jobb felső/bal alsó csoportokra is feloszthatja.
határsugár: 10 képpont 20 képpont;Ez megkönnyíti érdekes alakzatok létrehozását HTML elemeivel.
Végül beállíthatja, hogy minden saroknak saját sugara legyen.
border-radius: 10px 20px 30px 40px;Ezek az értékek az óramutató járásával megegyező irányban érvényesek, a bal felső saroktól kezdve.
CSS Border Side Properties
A körvonalakkal ellentétben a szegély minden oldalát beállíthatja úgy, hogy számos tulajdonságának egyedi értéke legyen. Ez lehetővé teszi az elem minden oldalának eltérő szélességét.
keret-bal-szélesség: 10px;
szegély jobb oldali szélesség: 20 képpont;
szegély felső szélessége: 30 képpont;
keret-alsó szélesség: 40 képpont;Független CSS-szegélystílusokat is beállíthat egy elem minden oldalához.
border-left-style: tömör;
border-right-style: pontozott;
border-top-style: szaggatott;
border-bottom-style: kettős;És ha akarja, megváltoztathatja az egyes oldalak színét.
szegély-bal-stílus: kék;
border-right-style: #ff0000;
border-top-style: #00ff00;
border-bottom-style: rgb (0, 0, 255);A CSS szegélyoldalai a szokásos gyorsírással működnek, hogy így kombinálják.
szegély-bal: 10 képpont egyszínű kék;
határ-jobb: 20px pontozott #00ff00;
border-top: 30px szaggatott #ff0000;
border-bottom: 40px kettősrgb(0, 0, 255);CSS Outline Property Values
A CSS-szegélyekhez hasonlóan a körvonalaknak is megvan a saját egyedi tulajdonságuk; körvonal-eltolás.
CSS körvonal-eltolás
Ha egy eltolást ad hozzá egy körvonalhoz, akkor szóköz jön létre közte és a fő elem között. Ennek az eltolásnak azonosnak kell lennie a körvonal mindkét oldalán, és a tulajdonság csak egy értéket fogad el.
körvonal-eltolás: 10px;Ez egy ügyes módja lehet egy harmadik szegély használatának az elemekhez, amelyek megfelelnek a háttérszínnek.
CSS szegély- és körvonalstílusok
Mind a szegélyeknek, mind a körvonalaknak stílusra van szükségük ahhoz, hogy működjenek. Tíz elérhető stílus közül választhat, beleértve a szegélyeket, amelyek egyáltalán nem jelennek meg.
szegély-stílus: tömör;
szegély-stílus: pontozott;
szegély-stílus: szaggatott;
border-style: groove;
szegély-stílus: gerinc;
szegély stílus: kettős;
szegély-stílus: betét;
szegély-stílus: kezdet;
border-style: rejtett;
szegély-stílus: nincs;A szegélyek ugyanazokat a stílusokat tartalmazzák a körvonalakkal, csak a tulajdonságként beállított vázlatstílussal.
A CSS szegélyek és körvonalak használata
A körvonalak és a szegélyek nagyszerű tervezési eszközök a webhelyek készítői számára. Ezekkel a CSS-tulajdonságokkal meghatározhatja webhelye megjelenését és hangulatát, de kreatívnak kell lennie.