Ingatlan css – « határ”, lehetővé teszi az elem körüli kerületen lévő vonal vastagságának, színének és típusának beállítását. Ennek a tulajdonságnak a paraméterei egy sorba írhatók, szóközzel elválasztva, tetszőleges sorrendben.

• - vonalvastagság egy pixel
• - folytonos vonal
• - Fehér szín
• - fekete szín
• - szürke szín

Tömör elemszegély

szaggatott elemszegély

Pontozott elemszegély

Elem szegély dupla vonal

A határ egyes szakaszainak tulajdona

Térfogatban süllyesztett hullámkarton keret

Térfogatban domború hullámkarton keret

Térfogatnyomott keret

Térfogatú domború keret

Leckék / CSS /

7. lecke

Szinte minden webhely használ olyan tulajdonságot, amely szegélyt hoz létre egy elem körül. Akár gombokhoz, akár szöveges blokkokhoz szükséges. Szegély létrehozásához a CSS-ben egy elemnek két tulajdonsága van: keret és körvonal. Tekintsük őket.

határ

Ez a tulajdonság az elem körüli keret beállításához szükséges, a webdokumentumban jelzi a szegélyét, a keret szélességét a rendszer figyelembe veszi az elem elhelyezésénél. 3 értéke van - szín, vastagság és kerettípus.

A border tulajdonság szintaxisa a következő:

keret: Szélesség Típus Szín;
A tulajdonságértékek megadásához más sorrendet is választhat, de a lényeg a szóközön keresztül történik.

A keret vastagságát (szélességét) pixelben (px) vagy százalékban (%) kell megadni.
A szín akármelyikben beállítható RGB formátum(Piros Zöld Kék), vagy HTML HEX kódban.

Alul láthatók VONALTÍPUSOK a nevükkel:

Hogyan állítsunk be szegélyeket egy elemhez? A következőképpen csináljuk:

#Blokk(
keret: 3px tömör #0085ss; /* állítsa be a vonalat 3 képpont vastag kékre */
}

Ha egyet, kettőt vagy hármat szeretne telepíteni keret az egyik oldalon, majd adja meg a következőképpen:

szegély felső- felső keret
határ-alsó- alsó keret
határ-bal- keret a bal oldalon;
határ-jobbra- keret a jobb oldalon;

Blokk (
border-right: 3px solid #0085cc;
border-bottom: 2px szaggatott #0085cc;
}

Ha akarod távolítsa el a kereteket elemet a CSS-ben, majd írja be a tulajdonságszegélybe - nincs

üres(
határ: nincs /* üres osztályú elemnek nem lesz szegélye */
}

vázlat

Az Outline egy olyan tulajdonság, amely egy elem külső szegélyének beállításához szükséges.

Van két különbség a határtól:
Először is, a vázlatban megadott vonal NEM befolyásolja magának a blokknak a helyzetét, szélességét és magasságát.
Másodszor, nincs lehetőség keret egy bizonyos oldalról történő felszerelésére.
A szintaxis megegyezik a kerettel.

körvonal: 2px pontozott #0085cc; /* szegély 2 px pontozott kék */
A körvonalak és a szegélyek esetében a szegélyeket úgy távolíthatja el, hogy nincs írva:

Köszönöm a figyelmet!

Előző cikk
6. lecke

Elemhatárok.

Kitöltés és margók a CSS-ben. Mi az a margó és kitöltés? Következő cikk
8. lecke. Hogyan állítsuk be egy elem szövegszínét és hátterét a CSS-ben?

Megjegyzések a cikkhez (vk.com)

határ

Böngésző támogatás

Leírás

A CSS tulajdonság lehetővé teszi a blokkszegély szélességének, stílusának és színének egyidejű beállítását. A blokkszegély egy egyszerű vonal/keret, amely minden oldalról körülveszi a blokkot. Nem szabad megfeledkezni arról, hogy egy keret hozzáadásakor ez hatással lesz a blokk teljes méretére.

Az értékek szóközzel vannak elválasztva, és tetszőleges sorrendben lehetnek, a böngésző meghatározza, hogy melyik felel meg a kívánt paraméternek. Nem szükséges mindhárom értéket megadni, a szélesség és/vagy a szín elhagyható, ilyenkor a hiányzó érték helyett az az érték kerül felhasználásra, ami az alapértelmezett tulajdonságnál be van állítva, pl. ha például nincs megadva szélesség, akkor a tulajdonság alapértelmezett értéke kerül felhasználásra. A szintaxis alatti táblázat mutatja, hogy mely tulajdonságok használhatók.

Megjegyzés: Ha csak egy elem bizonyos oldalain szeretne szegélyt beállítani, használja a következő tulajdonságokat: border-top, border-bottom, border-left, border-right.

Tipp: Általános szabály, hogy szegély használatakor kitöltést kell hozzáadnia.

CSS tulajdonság: border

Fehér szóközt adnak a blokkszegély és annak tartalma (szöveg, képek vagy gyermekcímkék) közé. Általában a szegély az elem tartalmához közel jelenik meg, ez csak akkor hasznos, ha szegélyt kell beállítani a kép köré.

Szintaxis

border: border-width border-style border-color|inherit;

Az ingatlanértékek

Példa

Van itt egy kis szöveg.

Eredmény ezt a példát böngészőablakban:

Hogyan állítsuk be a keret színét, stílusát és méretét a dobozokban.

A jelölőnyelvekben a border ( határ), csak táblázatok, képek és keretek vannak, bizonyos esetekben be lehet állítani a szegély színét és ennyi.

határ attribútum

A lépcsőzetes stíluslapok több lehetőséget kínálnak, de először is.

A CSS-ben a szegély (border) szélességét ezzel szabályozhatjuk határ-szélesség, pontosabban az egyes oldalak vastagságát külön szabályozhatjuk:
border-top-width- felső szegély vastagsága
határ-jobb-szélesség- a jobb oldali szegély vastagsága
szegély-alsó szélesség- alsó szegély vastagsága
szegély-bal-szélesség- a bal oldali szegély vastagsága
De lehet rövidíteni is:
P(border-width:jobbra fent balra lent;)(jobbra fent balra lent).
A szegély szélessége beállítható:
figurák DIV(border-width:5px), nullától a végtelenig, azaz. pozitív.
vékony- vékony keret, DIV(szegélyszélesség:vékony)
közepes- középső szegély, DIV(szegélyszélesség:közepes)
vastag- vastag szegély, DIV(szegélyszélesség:vastag)
A számokkal egyértelmű, de ezekkel az értékekkel minden a böngészőtől függ, de mégis vékony<= medium <= thick .

Ezzel is szabályozhatjuk a szegély színét szegély színe vagy pontosabban az egyes oldalak színe:
border-top-color felső szegély színe
szegély-jobb-szín a jobb oldali szegély színe;
szegély-alsó-szín az alsó szegély színe;
szegély-bal-szín szegélyszín a bal oldalon.
A színérték a következőképpen van beállítva szín, azaz a 16 szín egyike: aqua, fekete, kék, fukszia, szürke, zöld, lime, barna, sötétkék, olajbogyó, lila, piros, ezüst, kékeszöld, fehér vagy sárga, színeket is beállíthat: szín: #000000, szín: #AF0 , szín:rgb(255,0,0) vagy szín:rgb(100%, 0%, 0%).
Nem számít, milyen színsémát választ, a böngészők továbbra is lefordítják ezt szín:rgb(255,0,0). Például szín: lime = szín:#00ff00 = szín:#0F0 = szín:rgb(0%, 100%, 0%), de ez nem számít a böngészőnek szín:rgb(0,255,0), azaz kiszámolja ezt az értéket.

Ha a szegély vastagsága és színe HTML-el is szabályozható, akkor a stílus ( határ stílus) csak CSS!!!
A stílust mindkét oldal külön-külön szabályozhatja:
border-top-stílusban felső szegély stílusa;
határ-jobb-stílusban jobb szegélystílus;
border-bottom-style alsó szegély stílusa;
szegély-bal-stílus szegély stílus a bal oldalon.
Most fontolja meg a stílusok értékeit:
1)border-style:nincs- Ez az alapértelmezett érték, hasonlóan a border-width:0-hoz.
2)border-style:hidden- Ugyanaz, kivéve a táblázatokat (táblázat), amelyeket később megvizsgálunk.
3)border-style:dotted- Pontokból álló szegély.
4)border-style:szaggatott— Szegély szaggatott vonaltól.
5)border-style:szilárd- Folyamatos vonal szegély, i.e. mint a HTML-ben.
6)border-style:double- Dupla folytonos vonal szegélye, itt legalább 3 pixel vastagság (szegély-szélesség) kell.
7)border-style:groove- A szegély úgy néz ki, mintha vászonba vágták volna.
8)border-style:ridge— A szegély mintha kilógna a vászonból.
9)border-style:inset- Az egész doboz úgy néz ki, mintha a vászonba lenne nyomva.
10)border-style:outset- Az előző ellentéte.
Egyes böngészők figyelmen kívül hagyhatják a pontozott, szaggatott, dupla, groove, ridge, inset és outset értékeket, és tömörként, azaz tömörként jeleníthetik meg őket. közönséges határ.

Mindez természetesen igaz, de az összes fenti példa csak a működési elv, és nem egy mechanizmus.
Szabálytulajdonság határ azt jelenti (szegély: méretstílus színe;), ez a szabály akkor hajtódik végre, ha mindhárom érték jelen van, és csak ebben a sorrendben, pl. H1 (szegély: 5 képpont dupla piros;), de lehetnek kivételek, ha ezeket az értékeket jelölőnyelvek biztosítják, például egy táblázathoz TÁBLÁZAT(szegély: 2 képpont), azaz csak egy érték van megadva.

Annak érdekében, hogy ne a teljes járdaszegélyt, hanem az egyes részeket külön kezelje, vannak szabályok:
(szegély-felső: méret stílusú szín;) Felső járdavezérlés;
(jobb szegély: méretstílus színe;) Járdaszegélyvezérlés a jobb oldalon;
(szegély-alsó: méret stílus színe;) Alsó járdavezérlés;
(szegély-bal: méret stílus szín ;)Útszegélyvezérlés a bal oldalon.
Ezek a szabályok külön-külön vagy együtt is használhatók.

A kivétel ez a szabály:
H1(
szegély: 4 képpont egyszínű zöld;
}
A helyzet az, hogy a CSS-ben az utolsó szabálynak van a legmagasabb prioritása, ebben az esetben a border tulajdonság a border-left-et tartalmazza, ezért a border-left szabály figyelmen kívül lesz hagyva, pont így:
H1(
szegély: 4 képpont egyszínű zöld;
border-bal: 2px dupla piros;
}
Először a teljes járdaszegélyre, majd az egyes szakaszokra határozzuk meg a szabályokat.

Mindenem megvan az elemek szegélyeivel kapcsolatban, kivéve, hogy néhány tulajdonságot figyelembe veszünk, amikor eljutunk a táblákhoz és más kivételekhez.

css: határ. Elemhatárok.

CSS3 határok

CSS3 határok

A CSS3 segítségével lekerekített szegélyeket hozhat létre, árnyékokat adhat a tárolókhoz, és egy képet használhat szegélyként – mindezt olyan tervezőprogramok használata nélkül, mint a Photoshop.

Ebben a leckében a következő határtulajdonságokat ismerheti meg:

• határ-sugár
• doboz árnyéka
• határ-kép

Böngésző támogatás

Az Internet Explorer 9 támogatja az új szegélytulajdonságok egy részét.

A Firefox a -moz- előtagot igényli a border-image-hez.

A Chrome és a Safari a -webkit- előtagot igényli a keret-képhez.

Az Opera -o-t igényel a border-image-hoz.

A Safari a -webkit- előtagot is megköveteli a box-shadow számára.

Az Opera támogatja az új határtulajdonságokat.

CSS3 Lekerekített sarkok

A lekerekített sarkok hozzáadása a CSS2-ben bonyolult volt. Minden sarkon más-más képet kellett használnunk.

A CSS3-ban egyszerű a lekerekített sarkok létrehozása.

A CSS3-ban a border-radius tulajdonság lekerekített sarkok létrehozására szolgál:

Ennek a blokknak lekerekített sarkai vannak!

CSS3 Container Shadow

A CSS3-ban a box-shadow tulajdonságot arra használják, hogy árnyékot adjanak a dobozokhoz:

CSS3 Border-Image

A CSS3 border-image tulajdonsággal egy kép segítségével szegélyt hozhat létre:

A border-image tulajdonság lehetővé teszi képszegély megadását!

A szegély létrehozásához használt eredeti kép a tiéd:

Új határtulajdonságok

határ attribútum

határ attribútum, címke

HTML határok

Elfogadható a keret használata értékek nélkül, ekkor a szegélyvastagság egy pixel lesz. Alapértelmezés szerint a keret 3D effektusokkal jelenik meg, de ha a háttér attribútumot is alkalmazza, a keret "lapos" lesz.

Ezenkívül, ha a border attribútum értéke nem nulla, akkor a böngészők maguk a cellák körül is vékony kereteket jelenítenek meg. Ezeknek a szegélyeknek a megjelenítése a szabályok attribútummal szabályozható.

Értékek

Az attribútum értéke bármilyen nem negatív szám lehet, amely a pixelben kifejezett méretet határozza meg.

Alapértelmezett érték: 0.

Szintaxis

Kötelező attribútum: nincs.

HTML példa: A Border attribútum alkalmazása

Példa eredmény

Eredmény. A border attribútum alkalmazása.

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

Hogyan készítsek dupla szegélyt css-ben?

Sziasztok. Tudod, hogyan lehet dupla szegélyt csinálni css-ben? Ha nem, akkor kérjük, olvassa el ezt a rövid megjegyzést. A lényeg az, hogy ezt nem lehet rendes szegéllyel megtenni, hanem a másik irányba kell menni.

Ha a border tulajdonsággal határt állít be, akkor csak egyet állíthat be. 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ékkal

Általában, ha részletesebben szeretné tanulmányozni az árnyékot a css-ben, akkor 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 megmutatom, hogyan kell kettős szegélyt létrehozni. Tehát létrehozok egy közönséges blokkot, amelyhez felírok néhány stílust. A blokk bármilyen és bármilyen tartalmú lehet. Az én esetemben ez egy egyszerű div, így nem is mutatom meg a html kódot. És itt vannak a stílusok:

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

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

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-shadowban csak 5 paraméter található. Az első az árnyék vízszintes eltolása, a második a függőleges eltolá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ékra van szükségünk. 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, akkor az árnyék elkezd túlnyúlni az elemen. Így hozhat létre határokat, pontosan ugyanúgy, mint a border tulajdonság. Nos, az ötödik paraméterrel azt hiszem, minden világos - ez az árnyék színe.

Amint látja, egyszerűen felsoroltam az egyes új árnyékok paramétereit, vesszővel elválasztva. Gondolom már sejtetted, hogy ugyanígy lehet hármasszegélyt csinálni stb. Itt nincsenek korlátozások. Igazából, ami engem illet, a kérdés le van zárva, és ha bármilyen kérdése van, írja meg a megjegyzésekben.

Egy perc a figyelmedből: Mindannyian megbízható tárhelyen szeretnénk elhelyezni webhelyeinket. Több száz házigazdát elemeztem, és megtaláltam a legjobbat - HostIQ Több száz pozitív vélemény van róla a hálózatban, az átlagos felhasználói értékelés 4,8 az 5-ből. Legyenek jók a webhelyei.

Leírás

A border univerzális tulajdonság lehetővé teszi az elem körüli szegély szélességének, stílusának és színének egyidejű beállítását. Az értékek tetszőleges sorrendben, szóközzel elválasztva mehetnek, a böngésző meghatározza, 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 keret szélessége határozza meg a szegély szélességét. Számos szegély-stílusú érték áll rendelkezésre a megjelenés szabályozására. A nevüket és a művelet eredményét az ábra mutatja. egy.

1. ábra. Keret stílusok

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

Ebben a példában dupla szegély kerül a réteg köré. 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

Az Internet Explorer 6-os verzióig (beleértve) szaggatottan jeleníti meg, 1 képpont szélességű szegéllyel. 2 képpont vagy nagyobb méretnél 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 a doboz egyik szegélye 2 képpont vagy vastagabb, akkor az IE7-ben a pontok szaggatottá válnak.

Az Internet Explorer 7.0-s verzióig nem támogatja az öröklési értéket.

A szegély stílusa kissé eltérhet böngészőnként, ha a groove , ridge , inset vagy outset értékeket használja .

Leírás

A border univerzális tulajdonság lehetővé teszi az elem körüli szegély szélességének, stílusának és színének egyidejű beállítását. Az értékek tetszőleges sorrendben, szóközzel elválasztva mehetnek, a böngésző meghatározza, 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 keret szélessége határozza meg a szegély szélességét. Számos szegély-stílusú érték áll rendelkezésre a megjelenés szabályozására. A nevüket és a művelet eredményét az ábra mutatja. egy.

1. ábra. Keret stílusok

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

Ebben a példában dupla szegély kerül a réteg köré. 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

Az Internet Explorer 6-os verzióig (beleértve) szaggatottan jeleníti meg, 1 képpont szélességű szegéllyel. 2 képpont vagy nagyobb méretnél 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 a doboz egyik szegélye 2 képpont vagy vastagabb, akkor az IE7-ben a pontok szaggatottá válnak.

Az Internet Explorer 7.0-s verzióig nem támogatja az öröklési értéket.

A szegély stílusa kissé eltérhet böngészőnként, ha a groove , ridge , inset vagy outset értékeket használja .

A border általános tulajdonság egy elem határának szabályozására szolgál. Ez a tulajdonság lehetővé teszi, hogy egyetlen deklarációban beállítsa egy elem szegélyének szélességét, stílusát és színét.

Ez a három tulajdonság (a szegély szélessége, stílusa és színe) egyetlen deklarációban állítható be. Íme egy példa:

Szegélystílust csak az elem egyik oldalán adhat meg. Ehhez használja a border-top (felső szegély), border-right (jobb oldali szegély), border-bottom (alsó szegély), border-left (bal szegély) tulajdonságokat.

Ebben a példában a blokk minden oldalának saját szegélyvastagsága, stílusa és színe van.

Fontolja meg a CSS használatát egy ehhez hasonló alakzat létrehozásához:

A szegélyértékek - vastagság, stílus és szín - külön beállíthatók speciális tulajdonságokkal.

• border-style - a szegély stílusa.
• border-width - a szegély szélessége.
• border-color – a szegély színe.

Tekintsük az egyes értékeket külön-külön.

A szegély jellegű ingatlan. Szegély stílus.

A border stílusú tulajdonság beállítja a keret stílusát. A CSS-ben, a HTML-től eltérően, egy elem szegélye nem csak tömör lehet. A szegélystílus érvényes értékei:

1. nincs – nincs szegély (alapértelmezett).
2. tömör - tömör szegély.
3. kettős - kettős szegély.
4. szaggatott – pontozott szegély.
5. pontozott – pontok sorozatából álló szegély.
6. gerinc - "gerinc" szegély.
7. horony - szegély "barázda".
8. beillesztés – behúzott szegély.
9. eleje – extrudált szegély.

Példák arra, hogyan néznek ki.

nincs határ (nincs)

tömör szegély (szilárd)

dupla szegély (dupla)

pontozott szegély (pontozott)

pontozott szegély (szaggatott)

horonyszegély (horony)

gerincszegély

behúzott szegély (betét)

extrudált szegély (eleje)

Egyébként, ha a szegélyszínt feketére állítja a gerinckeretnél, akkor a következő eredményt kapja.

Div blokk fekete szegéllyel és gerinc stílussal.

A szegély szilárdnak tűnik, de ez azért van, mert a gerincstílus fekete árnyékhatás hozzáadásával jön létre, és a fekete hatás a fekete szegélyen nem látható.

A border-style tulajdonság segítségével a szegélystílus nem csak a blokk minden oldalára állítható be. Több értéket is beállíthat ugyanahhoz a szegélystílusú tulajdonsághoz, az értékek számától függően a szegélystílus a blokk különböző oldalaihoz lesz hozzárendelve. Beállíthat egy, kettő, három vagy négy értéket. Nézzünk példákat minden egyes esetre.

Egy érték (szilárd) - a szegélystílus a blokk minden oldalára be van állítva.

Két érték (szilárd dupla) - az első érték a felső és az alsó oldal stílusát állítja be, a második az oldalt.

Három érték (folytonos, dupla pontozott) - az első érték a felső oldalra, a második az oldalakra, a harmadik az alsóra.

Négy érték (folytonos, dupla pontozott szaggatott) - mindegyik érték az egyik oldalon az óramutató járásával megegyező irányban felülről.

A határszélességű tulajdonság. Szegély vastagsága.

A border-width tulajdonság az elem szegélyének szélességének beállítására szolgál. A szegély vastagsága bármilyen abszolút mértékegységben megadható, például pixelben.

A border stílusú tulajdonsághoz hasonlóan a tulajdonság is beállítható egy-négy értékre. Vegyünk példákat minden egyes esetre.

Példa kód:

A border-widd tulajdonsághoz kulcsszóértékek is vannak. Összesen három van:

• vékony - vékony szegély;
• közepes - közepes vastagságú;
• vastag - vastag szegély;

Szegély vastagság: vékony.

Szegélyvastagság: közepes.

Szegély vastagság: vastag.

A keretszín tulajdonság. Szegély színe.

A keretszín funkció a szegély színének szabályozására szolgál. A tulajdonság színei a Színek a CSS-ben című cikkben leírt módszerek bármelyikével beállíthatók, nevezetesen:

• A szín hexadecimális jelölése (#ff00aa ).
• Az RGB formátum rgb(255,12,110). RGBA formátum a CSS3-hoz.
• HSL és HSLA formátumok a CSS3-hoz.
• A szín neve, például fekete (fekete). A színnevek teljes listáját lásd a CSS színnevek táblázatában.

A keretszín tulajdonság egy-négy értéket is tartalmazhat, és az előző tulajdonságokhoz hasonlóan kezeli őket.

Egy érték (piros).

Két érték (piros fekete).

Három érték (piros fekete sárga).

Négy érték (piros fekete sárga kék).

Most térjünk vissza a fent hangoztatott feladathoz, és rajzoljunk egy ábrát:

Íme a kód, amely egy ilyen alakzatot rajzol, csak nagyobbat:

Az oldalak értékeinek beállítása külön

Ahogy fentebb említettük, a kerettulajdonságok értékeit csak a doboz egyik oldalán adhatja meg. E célokra a következő tulajdonságok állnak rendelkezésre:

• border-top (felső szegély)
• határ-jobb (jobb oldali szegély)
• border-bottom (alsó szegély)
• border-bal (bal szegély)

Hadd emlékeztesselek arra, hogy minden tulajdonságnál három érték van megadva (vastagság, stílus és szín), tetszőleges sorrendben. De vannak olyan tulajdonságok, amelyek lehetővé teszik a vastagság, a szín és a stílus beállítását mindkét oldalon külön-külön. Ezen tulajdonságok írása a fentiekből származik.

Felső szegély opciók (border-top ).

• border-top-color – egy elem felső szegélyének színét állítja be.
• border-top-width – egy elem felső szegélyének szélességét állítja be.
• border-top-style – beállítja az elem felső szegélyének stílusát.

Jobb szegély opciók (border-right ).

• border-right-color – az elem jobb oldali szegélyének színét állítja be.
• border-right-width – az elem jobb oldali szegélyének szélességét állítja be.
• border-right-style – beállítja az elem jobb oldali szegélyének stílusát.

Alsó szegély opciók (border-bottom ).

• border-bottom-color – egy elem alsó szegélyének színét állítja be.
• border-bottom-width – egy elem alsó szegélyének szélességét állítja be.
• border-bottom-style – beállítja az elem alsó szegélyének stílusát.

Bal oldali szegély opciók (border-left ).

• border-left-color – az elem bal oldali szegélyének színét állítja be.
• border-left-width – az elem bal oldali szegélyének szélességét állítja be.
• border-left-style – beállítja az elem bal oldali szegélyének stílusát.

Példa ezen tulajdonságok használatára:

A határsugár tulajdonság. A határ sarkainak lekerekítése.

A border-radius tulajdonság egy elem szegélyeinek sarkainak lekerekítésére szolgál. Ezt a tulajdonságot a CSS3-ban vezették be, és az Internet Explorer 8 (és régebbi verziói) kivételével minden modern böngészőben megfelelően működik.

Az értékek tetszőleges CSS-ben használt számok lehetnek.

ingatlan határ-sugár: 15px.

Ha a blokkkeret nincs beállítva, akkor a háttérrel együtt kerekítés történik. Íme egy példa a szegély nélküli, de háttérszínnel rendelkező blokkkerekítésre:

ingatlan határ-sugár: 15px.

Vannak tulajdonságok az elem minden egyes sarkának lekerekítésére. Ez a példa mindegyiket használja:

border-top-bal-sugár: 15px; határ-jobb felső-sugár: 0; szegély-jobb alsó-sugár: 15 képpont; határ-alul-bal-sugár: 0;

ingatlan határ-sugár: 15px.

Bár ez a kód egy deklarációban is felírható: border-radius : 15px 0 15px 0 . A helyzet az, hogy a border-radius tulajdonságnál egytől négyig állítható be az érték. Az alábbi táblázat összefoglalja az ilyen nyilatkozatokra vonatkozó szabályokat.

A táblázat alapos tanulmányozásával megértheti, hogy a kívánt stílus legrövidebb bejegyzése a következő lesz: border-radius : 15px 0 . Csak két érték van.

Egy kis gyakorlat

Rajzolj egy citromot CSS segítségével.

Íme egy ilyen blokk kódja:

Margó: 0 auto; /* A blokk középre helyezése */ szélesség: 200px; magasság: 200 képpont; háttér: #F5F240; keret: 1px tömör #F0D900; border-radius: 10px 150px 30px 150px;

Az ábrát már megrajzoltuk:

Most hagyjunk belőle egy háromszöget:

A háromszög kódja:

Margó: 0 auto; /* A blokk középre helyezése */ padding: 0px; szélesség: 0 képpont magasság: 0; szegély: 30 képpont tömör fehér; szegély-alsó szín: piros;