VISSZA
MENÜ
TOVÁBBA szövegekhez hasonlóan a dobozokhoz is rendelhetünk egy vagy több árnyékot.
A doboz árnyékát a box-shadow tulajdonsággal állíthatjuk be.
Az árnyék mindig követi a szegély alakját. Ha lekerekített szegélyt használunk, akkor az árnyék is lekerekített lesz.
Az árnyékot elhelyezhetjük a dobozon belül vagy kívül. Ha belül kívánjuk elhelyezni, akkor az inset kulcsszót is meg kell adnunk a stílusdefinícióban.
A doboz árnyékának beállítása:
kijelölő
{
box-shadow
:
érték,
érték,
érték,
érték,
érték,
inset;
}
- Az első érték az árnyék vízszintes kiterjedését adja meg. Pozitív érték esetén jobbra, negatív érték esetén pedig balra jelenik meg az árnyék.
- A második érték az árnyék függőleges kiterjedését adja meg. Pozitív érték esetén lefelé, negatív érték esetén pedig felfelé jelenik meg az árnyék.
- Ha a harmadik érték 0, akkor az árnyák éles, az érték növeléséve elmosódottá, homályossá tehető.
- A negyedik értékkel az árnyék minden irányba kiterjeszthető. Negatív érték esetén pedig összehúzható.
- Az ötödik érték az árnyék színét határozza meg, a CSS3 színek fejezetben megismert módon.
- A végén az inset kulcsszót megadva az árnyák belülre kerül.
Példa:
Forráskód
<style>
div {border:1px solid green;
background-color: green;
color:#ffffff;
width:150px; height:100px;
padding: 5px;
border-radius: 20px;
text-align:center; }
#id_0 {box-shadow: 5px 5px 0px 0px #444444;}
#id_1 {box-shadow: -5px -5px 0px 0px #444444;}
#id_2 {box-shadow: -5px -5px 10px 0px #444444;}
#id_3 {box-shadow: -3px -3px 10px 5px #444444;}
#id_4 {box-shadow: 10px 0px 10px 2px #444444;}
</style>
...
<body>
<div id="id_0">5px 5px 0 0</div>
<div id="id_1">-5px -5px 0 0</div>
<div id="id_2">-5px -5px 5px 0</div>
<div id="id_3">-3px -3px 10px 5px</div>
<div id="id_4">10px 0 10px 2px</div>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_szegely_arnyek_1.html