Michael 2016-06-11 1 HTML és CSS 0

Hogyan készítsünk kettős szegélyt CSS-ben?

Sziasztok. Tudod, hogyan lehet kettős szegélyt készíteni CSS-ben? Ha nem, akkor kérjük, olvassa el ezt a rövid megjegyzést. A helyzet az, hogy ezt nem lehet normál szegéllyel megtenni, itt másképp kell haladni.

Ha szegélyt ad meg a border tulajdonság segítségével, akkor csak egyet adhat meg. De nagyon gyakran a tervezéshez több keretre is szükség lehet. Ebben az esetben pszeudo-keretet kell használnia - árnyékot.

Dupla szegély doboz-árnyék segítségével

Általában, ha részletesebben szeretné tanulmányozni az árnyékokat a CSS-ben, azt tanácsolom, hogy olvassa el a megfelelő témát. Ebben a cikkben nem magyarázom el részletesen a tulajdonság szintaxisát, hanem egyszerűen bemutatok egy technikát a kettős szegély létrehozására. Tehát létrehozok egy közönséges blokkot, és hozzáadok néhány stílust. A blokk bármi lehet és bármilyen tartalommal. Az én esetemben ez egy egyszerű div, szóval html kódot Nem is mutatom meg. És itt vannak a stílusok:

Div(
háttér: #E0D8A3;
szélesség: 180 képpont;
magasság: 110 képpont;
padding: 12px;
}

Nos, a blokk tervezésének tipikus példája.
Most hozzunk létre egy kettős keretet több árnyék használatával. A következő tulajdonságot adom hozzá a blokk stílusaihoz:

Box-shadow: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

Így néz ki:

Amint látja, nagyon szép lett. A Box-shadow-nak csak 5 paramétere van. Az első az árnyék vízszintes elmozdulása, a második a függőleges elmozdulás. A harmadik és negyedik paraméter az elmosódás és a nyújtás. Amint látja, az első háromhoz egyáltalán nem nyúlunk hozzá. Nincs szükségünk elmosódásra, mert éles árnyékot akarunk. Mint látható, a negyedik paramétert - a nyújtást - írtam fel. Meghatározza, hogy az árnyék mennyivel lesz nagyobb, mint az az elem, amelyhez kapcsolódik.

Alapértelmezés szerint minden így néz ki - az árnyék ugyanolyan méretű, mint az elem, és egyértelműen alatta fekszik. Ha megváltoztatja a nyújtást, az árnyék elkezd túlnyúlni az elemen. Így hozhat létre szegélyeket, pontosan ugyanúgy, mint a border tulajdonságnál. Nos, az ötödik paraméterrel azt hiszem, minden világos - ez az árnyék színe.

Amint látja, egyszerűen felsoroltam a paramétereket minden új árnyékhoz vesszővel elválasztva. Gondolom már kitaláltad, hogy ugyanígy lehet tripla keretet készíteni stb. Itt nincsenek korlátozások. Igazából, ami engem illet, a kérdés le van zárva, és ha bármi kérdésed van, nyugodtan írd meg kommentben.

Egy pillanat a figyelmedből: Mindannyian megbízható tárhelyen szeretnénk tárolni webhelyeinket. Több száz tárhelyet elemeztem, és megtaláltam a legjobbat - HostIQ Több száz van online pozitív visszajelzést ezzel kapcsolatban az átlagos felhasználói értékelés 4,8 az 5-ből. Legyen jól a webhelye.

A szegélyek azok a vonalak, amelyek körülvesznek egy elemet (a benne lévő tartalmat és a körülötte lévő kitöltést). Egy példa, amellyel már találkoztunk, a cellák keretei a táblázatban.

A CSS kétféle szegélyt biztosít: a belső szegélyeket és a külső vonalakat. CSS-tulajdonságok, amely a keretek tervezéséért felelős, a „border” szóval kezdődik, amely „keret”, „keret”-nek fordítható. A külső körvonal meglétét és formátumát a „körvonal” szóval kezdődő tulajdonságok határozzák meg. A körvonal a szegéllyel ellentétben nem befolyásolja a keretezett blokk szélességét és helyzetét. Ráadásul nem szerelhető csak egy oldalra, mint határ- csak minden oldalról egyszerre.

Először beszéljünk a szegélytervezésről, aztán továbblépünk vázlat.

határ-szélesség

Beállítja a szegély szélességét. Nyilvánvaló, hogy alapértelmezés szerint az elemet négy oldalról keret veszi körül. A tulajdonság lehetővé teszi, hogy beállítsa a szegélyek szélességét minden oldalon egyforma vagy minden oldalon eltérő. Attól függően, hogy melyik szegélyhez milyen szélességet kell hozzárendelni, a szabályban 1-4 értéket adhat meg.

A szélességet a szokásos pixelekkel, százalékokkal és egyéb CSS hosszegységekkel állíthatja be, ill fenntartott szavak vékony(2 képpont), közepes(4px) és vastag(6 képpont).

Szegély szélessége: 16 képpont 12 képpont 4 képpont 8 képpont;

határos stílusban

Meghatározza a szegély stílusát. Vegye figyelembe, hogy ha nem állítja be ezt a szabályt, de adja meg a tulajdonságot határ-szélesség, akkor egyáltalán nem lesznek keretek, tehát ha látható szegélyeket szeretnél, mindenképpen add meg határos stílusban.

Egy ingatlannak elég sok értéke lehet, ezek mindegyikét jól szemlélteti az alábbi ábra.

Az utolsó bekezdés azt mutatja, hogy a keret stílusa, akárcsak a vastagsága, mindkét oldalon saját lehet:

szegély-stílus: tömör dupla pontozott nincs

határ-szín

Ugyanúgy működik, mint az előző tulajdonságok, de felelős a szegélyek színéért. Azt is beállíthatja egytől négyig, és már tudja az eredményt. Ha a szabály nincs beállítva, a keretek az aktuális elem szövegszínével, vagy ha ez nincs megadva, a szülőelem szövegszínével rendelkeznek.

Szegély színe: #C85EFA;

határ

Könnyebbé teszi a kódírást és menti a kódot, mivel lehetővé teszi, hogy egy sorban beállítsa az összes felsorolt ​​tulajdonságot a szegélyekhez egy elem minden oldalán:

P (szegély: 2 képpont folyamatos zöld; )

Ha különböző szabályokat szeretne beállítani a különböző oldalakon lévő keretekre, a következő értékeket használhatja:

• border-top- felső határ.
• határ-jobbra- jobb.
• határ-alsó- Alsó.
• határ-bal- bal.

P (bal oldali szegély: 6 képpont sárga pontozott;)

körvonal-szélesség

Ugyanaz, mint a határ-szélesség, csak a külső kerethez, a belsőhez nem. A körvonal vastagságát azonos értékekre állítja be határ-szélesség. Az elem keretének vastagságán kívül meg kell adni a stílusát, különben nem lesz körvonal.

vázlat stílusú

A tulajdonságértékek megduplázzák az értékeket határos stílusban. A szabály határozza meg a külső kontúr stílusát.

Leírás

Az általános border tulajdonság lehetővé teszi, hogy egyidejűleg beállítsa az elem körüli szegély vastagságát, stílusát és színét. Az értékek tetszőleges sorrendben lehetnek, szóközzel elválasztva, a böngésző maga határozza meg, hogy melyik felel meg a kívánt tulajdonságnak. Ha csak egy elem bizonyos oldalain szeretne szegélyt beállítani, használja a border-top , border-bottom , border-left , border-right tulajdonságokat.

Szintaxis

Értékek

A szegély szélessége határozza meg a szegély vastagságát. Számos szegély-stílusú érték áll rendelkezésre a megjelenés szabályozására. A nevüket és az akció eredményét az ábra mutatja be. 1.

1. ábra. Keret stílusok

border-color beállítja a szegély színét, az érték bármilyen, a CSS által engedélyezett formátumban lehet.

inherit örökli a szülő értékét.

HTML5 CSS2.1 IE Cr Op Sa Fx

BAN BEN ebben a példában A réteg köré dupla szegély kerül hozzáadásra. Az eredmény az ábrán látható. 2.

Rizs. 2. A határtulajdon alkalmazása

Objektummodell

document.getElementById("elementID ").style.border

Böngészők

Böngésző internet böngésző a hatodik verzióig (beleértve a hatodik verziót is) 1 képpontos szegélyvastagsággal szaggatott szaggatottan jelenik meg. 2 képpont vagy nagyobb vastagság esetén a pontozott érték megfelelően működik. Ezt a hibát javították az IE7-ben, de csak az összes 1 képpontos szegélyre. Ha az egyik blokkszegély vastagsága 2 képpont vagy nagyobb, akkor az IE7-ben a pontozott érték szaggatottá változik.

Az Internet Explorer 7.0-ig terjedő verziói nem támogatják az öröklési értéket.

Szegély stílus be különböző böngészők kismértékben változhat a horony , gerinc , inset vagy outset értékek használatakor.

A keretek többféleképpen használhatók, például dekorációs elemként vagy két tárgy elválasztására. A CSS számtalan lehetőséget kínál a szegélyek használatára.

A keret vastagsága

A szegély szélességét a border-width tulajdonság határozza meg, amely lehet vékony, közepes és vastag, vagy pixelben kifejezett numerikus érték. Az ábra ezt a rendszert mutatja:

Keret színe

A border-color tulajdonság határozza meg a keret színét. Az értékek normál színértékek, például: "#123456", "rgb(123,123,123)" vagy "sárga".

A keretek típusai

Létezik Különféle típusok keretrendszer Az alábbiakban látható a nyolc kerettípus és értelmezésük az Internet Explorer 5.5-ben. Minden példa "arany" színben és "vastag" vastagságban látható, de természetesen más színben és vastagságban is megjeleníthető.

A none vagy a rejtett értékek használhatók, ha nem szeretné megjeleníteni a szegélyt.

Példák keretek meghatározására

A fent tárgyalt három tulajdonság minden elemben kombinálható, és ennek megfelelően különböző keretek állíthatók be. Szemléltetésképpen vessünk egy pillantást a dokumentumra, amely különböző kereteket határoz meg

,

,

És

Az eredmény talán nem olyan lenyűgöző, de néhány lehetőséget mutat:

H1 (szegély-szélesség: vastag; szegély-stílus: pontozott; keret-szín: arany; ) h2 (szegély-szélesség: 20 képpont; szegély-stílus: kezdet; szegélyszín: piros; ) p (szegély-szélesség: 1px; szegély-stílus: szaggatott; keretszín: kék; ) ul (szegély-szélesség: vékony; szegély-stílus: tömör; szegélyszín: narancssárga; )

A keret felső, alsó, jobb és bal széléhez speciális tulajdonságokat is beállíthat. Íme, hogyan történik:

H1 (szegély-felső szélesség: vastag; szegély-felső stílus: tömör; szegély-felső szín: piros; szegély-alsó szélesség: vastag; szegély-alsó-stílus: tömör; szegély-alsó szín: kék; szegély-jobb-szélesség: vastag; szegély-jobb-stílus: tömör; szegély-jobb-szín: zöld; szegély-bal-szélesség: vastag; szegély-bal-stílus: tömör; szegély-bal-szín: narancssárga; )

Rövid jelölés

Sok más tulajdonsághoz hasonlóan a határ szó használatával több tulajdonságot is egyesíthet egybe. Példa:

P (szegély szélessége: 1 képpont; keret stílusa: tömör; szegély színe: kék; )

kombinálható:

P (szegély: 1 képpont egyszínű kék;)

Összegzés

Ebben az oktatóanyagban megismerkedhetett a CSS határtalan lehetőségeivel a szegélyek használatakor.

A következő leckében megvizsgáljuk, hogyan lehet méreteket meghatározni egy dobozmodellben - magasság és szélesség.

A Border-image egy olyan tulajdonság, amely lehetővé teszi a beállítást háttérkép az elemkerethez. Az ingatlan egy keretet kitölt egy adott képpel, a kép egyes részeit úgy osztja el, hogy a sarokrészek a keret sarkaiban legyenek, a köztük lévő tereket pedig a kép többi része tölti ki.

Ez a tulajdonság megkönnyíti olyan hihetetlen dolgok elvégzését, amelyekhez korábban 3-8 képre és a jelölések manipulálására volt szükség.

Frissítés: A Firefox a 29-es verziótól kezdve működik.

A kép mérete megegyezik a keret vastagságával. A keret színét és stílusát figyelmen kívül hagyja.

Ha csak a border-image-source beállítást állítja be, a kép kitölti a sarkokat, és nem tudja, mi legyen a következő lépés:

Szegély: 80 képpont tömör átlátszó; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Szegély-kép-szelet

Fontos tulajdonság, amely meghatározza annak a képdarabnak a méretét, amely kitölti a keret sarkait. A fennmaradó részekkel a sarkok közötti teret töltjük ki a border-image-repeat -ban megadott algoritmus szerint.

Lehetséges értékek:

<проценты>- a képmérethez viszonyítva számítva. Vízszintes a szélességhez, függőleges - a magassághoz képest.<числа>- pixel (for bittérkép) vagy koordináták (vektor esetén). A mértékegységek nincsenek feltüntetve. tölt - kulcsszó, kiegészítve az előző értékeket. Ha meg van adva, a képet nem a keret belső széle vágja le, hanem kitölti a kereten belüli területet is. Nagyon hasznos lekerekített keretekhez.

Az egyes oldalak értékeinek meghatározásához több érték is megadható szóközzel elválasztva.

Az ellentétes oldalak értékeinek összegének kisebbnek kell lennie, mint a kép mérete, különben semmi sem fogja kitölteni a sarkok közötti teret.

Szegély: 80px tömör átlátszó; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100;

Szegély-kép-ismétlés

A tulajdonság határozza meg, hogy a sarkok közötti hézagokat hogyan kell kitölteni.

Lehetséges értékek: stretch - megnyújtja a kép kitöltési területét. Alapértelmezett érték; ismétlés - megismétli a töltési szakaszt, miközben a sarokképes illesztések láthatók; kerek - kitölti a sarkok közötti rést. Az oldal közepén egy varrás látható. A leggondosabb cselekvés. szóköz – az ismétléshez hasonlóan működik. Nem találtam különbséget.

Egyszerre két értéket állíthat be, az első felelős a kép viselkedéséért a felső és az alsó keretben, a második - a bal és a jobb oldalon.

Border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100; border-image-repeat: ismétlés;

A bal oldalon az ismétlés , a jobb oldalon a kerek .

Ha a keret összetett, és az oldalak nem illeszkednek jól egymáshoz, a nyújtás jobban működik, íme egy példa.

Szegély-kép-szélesség

keret-kép-szélesség

A tulajdonság szabályozza a keret látható részének szélességét és méretezi azt. Ha ez az érték nagyobb, mint a border-width , a szegélykép a tartalom alá fog feltérképezni, még akkor is, ha a kitöltési tulajdonság nincs beállítva.

Lehetséges értékek:<длина>- értékek px-ben vagy em-ben;<%>- a képmérethez viszonyított százalékos értékek;<числа>- numerikus érték, amellyel a szegélyszélesség automatikus szorzata - kulcsszó. Ha adott, az érték megegyezik a megfelelő keret-képszelettel. Ha nincs megfelelő méret, akkor a keret-szélesség értéke kerül felhasználásra, és a kép a keret teljes sarkát kitölti, a tartalom alá mászva. Kicsit furcsán működik.

Szegély: 60 képpont tömör átlátszó; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 80; border-image-repeat: round; keret-képszélesség: 160 képpont;

A jobb oldalon egy keret látható keret-képszélességgel. A bal oldali példa azt mutatja, hogyan vágták le a képet a keret belső szélei által. A megnövelt szélesség miatt a jobb oldali keret bemászott a tartalom alá.

Border-image-outset

Érdekes tulajdonság, amely lehetővé teszi a keret mozgatását az elemen kívülre. A negatív értékek nem támogatottak.

Lehetséges értékek:<длина>- értékek px-ben vagy em-ben;<числа>- az a számérték, amellyel a szegélyszélesség megszorozva.

Szegély: 60 képpont tömör átlátszó; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 120; border-image-repeat: round; border-image-outset: 60px 10px 50px 120px;

A jobb oldalon a border-image-outset példája látható. Ez a tulajdonság nem befolyásolja az elem méretét, és a keret átfedheti a szomszédos elemeket.