box-shadow árnyékkeret.


Területekhez másodlagos vagy árnyékkeret.

Box shadow alapértelmezett elvárása:
- Minimum kettő értéket kell meghatározni, még akkor is, ha valamelyik értéke "0"-a.
- Értékei lehetnek: pozitív vagy negatív.
- Alaphelyzetben, fekete színnel jelenik meg, a kiválasztott területi oldalánál.



A box-shadow megjelenítése, egy oldalon.

.jobbra{width:150px; height:70px; border:1px solid red; padding:5px; box-shadow: 10px 0px;}
.lentre{width:150px; height:70px; border:1px solid red;padding:5px; box-shadow: 0px 10px;}
.balra{width:150px; height:70px; border:1px solid red;padding:5px; box-shadow: -10px 0px;}
.fentre{width:150px; height:70px; border:1px solid red;padding:5px; box-shadow: 0px -10px;}


Jobbra
Lentre
Balra
Fentre


A box-shadow megjelenítése, kettő vagy több oldalnál.

.jobbra-lentre {width:150px; height:70px; border:1px solid red; padding:5px; box-shadow: 10px 10px;}
.lentre-balra {width:150px; height:70px; border:1px solid red;padding:5px; box-shadow: -10px 10px;}
.balra-fentre {width:150px; height:70px; border:1px solid red;padding:5px; box-shadow: -10px -10px;}
.jobbra-fentre {width:150px; height:70px; border:1px solid red;padding:5px; box-shadow: 10px -10px;}

.harom-oldalon{width:150px; height:70px; border:1px solid red; padding:5px; box-shadow: 10px 10px, 0px -10px;}
.negy-oldalon{width:150px; height:70px; border:1px solid red; padding:5px; box-shadow: 10px 10px, -10px -10px;}


jobbra és lentre
lentre és balra
balra és fentre
jobbra és fentre
 

Három
oldalnál.


Négy
oldalnál.
 


A box-shadow alapértelmezett fekete színe helyett,
határozzunk meg, tetszőleges színt.

.jobbra-lentre-szin{width:150px; height:70px; border:1px solid red; padding:5px; box-shadow: 10px 10px green;}
.lentre-balra-szin{width:150px; height:70px; border:1px solid red;padding:5px; box-shadow: -10px 10px green;}
.balra-fentre-szin{width:150px; height:70px; border:1px solid red;padding:5px; box-shadow: -10px -10px green;}
.jobbra-fentre-szin{width:150px; height:70px; border:1px solid red;padding:5px; box-shadow: 10px -10px green;}


jobbra és lentre
Zöld (green;) szin.
lentre és balra
Zöld (green;) szin.
balra és fentre
Zöld (green;) szin.
jobbra és fentre
Zöld (green;) szin.
 

Három
oldalnál szín
meghatározással.

Négy
oldalnál szín
meghatározással.
  


Szin meghatározása homályosítással.

.jl-hszin{width:150px; height:70px; border:1px solid red; padding:5px; box-shadow: 10px 10px 5px green;}
.lb-hszin{width:150px; height:70px; border:1px solid red;padding:5px; box-shadow: -10px 10px 5px green;}
.bf-hszin{width:150px; height:70px; border:1px solid red;padding:5px; box-shadow: -10px -10px 5px green;}
.jf-hszin{width:150px; height:70px; border:1px solid red;padding:5px; box-shadow: 10px -10px 5px green;}


jobbra és lentre
Zöld (green;) szin.
lentre és balra
Zöld (green;) szin.
balra és fentre
Zöld (green;) szin.
jobbra és fentre
Zöld (green;) szin.
 

Három
oldalnál szín
meghatározással.

Négy
oldalnál szín
meghatározással.
  




Megjelenése eltérő homályosítási értékeknél.

Az X helyére, tetszőleges számot írhatunk. A szín megadható: Angól neve vagy kódja alapján)
{width:190px; height:50px; background-color:yellow; box-shadow: 5px 5px Xpx blue;}

5px 5px 2px blue;
5px 5px 4px blue;
5px 5px 6px blue;
5px 5px 8px blue;


5px 5px 10px blue;

5px 5px 15px blue;

5px 5px 20px blue;

5px 5px 30px blue;
 



.kep{
    margin-left: 30px; 
    box-shadow: -6px -6px 10px #561A0B;
   }

<img src="kutya.jpg" alt="Házőrző kutya." width="80" height="80" border="0" class="kep" />

Házőrző kutya.

Régi böngésző programoknál, több meghatározás is kell, melyet az újak is, elfogadnak.

.kep{
    margin-left: 30px;
    margin-top: 30px;
    box-shadow: -6px -6px 10px #561A0B;
    -webkit-box-shadow: -6px -6px 10px #561A0B;
    -moz-box-shadow: -6px -6px 10px #561A0B;
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#561A0B, offX=-6, offY=-6, positive=true);
   }

<img src="kutya.jpg" alt="Házőrző kutya." width="80" height="80" border="0" class="kep" />

Házőrző kutya.