Īpašība box-shadow
Īpašība box-shadow iestata ēnu blokam.
Kā vērtību īpašība pieņem 6
parametrus, kas uzskaitīti atdalīti ar atstarpēm, vai
atslēgvārdu none, kas pilnībā atceļ ēnu.
Sintakse
selektors {
box-shadow: inset nobīde_pa_x nobīde_pa_y izplūde izmērs_ēnas krāsa;
}
selektors {
box-shadow: none;
}
Parametri
| Parametrs | Apraksts |
|---|---|
inset |
Neobligāts parametrs. Ja tas ir norādīts, ēna atradīsies kontejera iekšpusē, ja nav norādīts - tad ārpusē. |
| nobīde pa x |
Nosaka ēnas nobīdi pa X asi.
Pozitīva vērtība nobīda pa labi, negatīva - pa kreisi. |
| nobīde pa y |
Nosaka ēnas nobīdi pa Y asi.
Pozitīva vērtība nobīda uz leju, negatīva - uz augšu. |
| izplūde |
Nosaka ēnas izplūdi.
Jo lielāka vērtība - jo izplūdīgāka būs ēna. Neobligāts parametrs. Ja nav norādīts - ēna būs skaidri norobežota. |
| izmērs ēnas |
Nosaka ēnas izmēru. Pozitīva vērtīra izstiepj ēnu, negatīva, pretēji, to saspiež. Neobligāts parametrs. Ja nav norādīts - ēna būs tāda paša izmēra kā elements. |
| krāsa |
Nosaka ēnas krāsu jebkurās krāsas mērvienībās.
Neobligāts parametrs. Ja nav norādīts - ēnas krāsa sakrīt ar teksta krāsu. |
Nobīdes pa asīm, izplūde un ēnas izmērs tiek norādīti jebkurās izmēru mērvienībās, izņemot procentus.
Piemērs
Šajā piemērā ēna ir nobīdīta uz leju un pa labi un pievienota neliela izplūde:
<div id="elem"></div>
#elem {
box-shadow: 5px 5px 3px black;
border: 1px solid black;
width: 300px;
height: 50px;
}
:
Piemērs . Skaidri norobežota ēna
Šajā piemērā ēna ir nobīdīta uz leju un pa labi, bet izplūdes nav (ēna būs skaidri norobežota):
<div id="elem"></div>
#elem {
box-shadow: 2px 2px black;
border: 1px solid black;
width: 300px;
height: 50px;
}
:
Piemērs . Vienmērīga ēna
Šajā piemērā ēna nav nobīdīta, bet tai ir pievienota izplūde:
<div id="elem"></div>
#elem {
box-shadow: 0px 0px 3px black;
border: 1px solid black;
width: 300px;
height: 50px;
}
:
Piemērs . Ēnas izmērs
Šajā piemērā ēna nav nobīdīta, izplūde ir nulle, bet tai ir pievienots izmērs (melnais - ir robeža, sarkanā - ir ēna):
<div id="elem"></div>
#elem {
box-shadow: 0 0 0 3px red;
border: 3px solid black;
width: 300px;
height: 50px;
}
:
Piemērs . Izplūde + ēnas izmērs
Šajā piemērā ēna nav nobīdīta, bet tai ir pievienota izplūde un izmērs (melnais - ir robeža, sarkanā - ir ēna):
<div id="elem"></div>
#elem {
box-shadow: 0 0 3px 3px black;
border: 1px solid black;
width: 300px;
height: 50px;
}
:
Piemērs . Iekšējā ēna
Šajā piemērā ēna atrodas kontejera iekšpusē:
<div id="elem"></div>
#elem {
box-shadow: inset 0 0 6px black;
border: 1px solid black;
width: 300px;
height: 50px;
}
:
Skatiet arī
-
īpašība
text-shadow,
kas iestata ēnu tekstam