Exemplu
Adăugați o cutie-umbra unui <div> Element:
div
{
box-shadow: 10px 10px 5px #888888;
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea box-shadow atașează unul sau mai multe umbre la un element.
| Valoare implicită: | none |
|---|---|
| Mostenit: | no |
| Animatable: | yes. Read about animatable Try it |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.boxShadow="10px 20px 30px blue" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit- sau -moz- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- | 9 | 4 3.5 -moz- | 5.1 3.1 -webkit- | 10.5 |
CSS Sintaxa
box-shadow: none| Note: Proprietatea box-shadow atașează unul sau mai multe umbre la un element. Proprietatea este o listă separată prin virgulă de umbre, specificate fiecare cu 2-4 valori de lungime, o culoare opțional și un cuvânt cheie medalion opțional. lungimile sunt 0 omise.
Valori de proprietate
Valoare Descriere Joaca-l none Valoare implicită. Nici o umbră este afișată Joaca - l » h-shadow Necesar. Poziția umbrei orizontală. Valorile negative sunt permise Joaca - l » v-shadow Necesar. Poziția umbrei pe verticală. Valorile negative sunt permise Joaca - l » blur Opțional. Distanța neclaritate Joaca - l » spread Opțional. Dimensiunea de umbră. Valorile negative sunt permise Joaca - l » color Opțional. Culoarea umbrei. Valoarea implicită este negru. Uită - te la valori de culoare CSS pentru o listă completă de posibile valori de culoare.
Notă: În Safari (on PC) , este necesar parametrul de culoare. Dacă nu specificați culoarea, umbra nu este afișată deloc. Joaca - l » inset Opțional. Modifică umbra de la o umbră exterioară (outset) la umbra interioară Joaca - l » initial Setează această proprietate la valoarea implicită. Citiți despre inițială Joaca - l » inherit Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc
Mai multe exemple
Imaginile aruncate pe masa
Acest exemplu demonstrează modul de a crea "polaroid" imagini și roti imaginile.
Pagini similare
Tutorial CSS3: CSS3 Frontiere
HTML DOM referință: boxShadow property