Style boxShadow ominaisuus

Määrittely ja käyttö

boxShadow Ominaisuus asettaa tai palauttaa kehän heijastuksen (drop-shadow).

Katso myös:

CSS viittausoppikirja:box-shadow ominaisuus

Esimerkki

Lisää box-shadow div-elementille:

document.getElementById("myDIV").style.boxShadow = "10px 20px 30px blue";

Kokeile itse

Syntaksi

Palauta boxShadow ominaisuus:

objekti.style.boxShadow

Aseta boxShadow ominaisuus:

objekti.style.boxShadow = "none|h-shadow v-shadow blur spread color |inset|initial|inherit"

Huomautus:boxShadow Ominaisuus lisää kehään yhden tai useamman varjon. Tämä ominaisuus on pilkkuera muodossa oleva varjojen luettelo, jossa jokainen varjo määritetään 2-4 pituusarvon, valinnaisen väriarvon ja valinnaisen 'inset'-avainsanan avulla. Pituuksien puuttuessa arvo on 0.

Ominaisuusarvo

Arvo Kuvaus
none Oletusarvo. Ei näy varjoa.
h-shadow Pakollinen. Vaakasuuntainen varjon sijainti. Sallitaan negatiiviset arvot.
v-shadow Pakollinen. Pystysuuntainen varjon sijainti. Sallitaan negatiiviset arvot.
blur Valinnainen. Pehmennysetäisyys.
spread Valinnainen. Varjon koko.
color

Valinnainen. Väri varjoa. Oletusarvo on musta.

Tarkista CSS-väriarvot,saadaksesi täydellisen listan mahdollisista väriarvoista.

Vinkki:Safarissä (tietokoneella)color Parametri on pakollinen. Jos ei määritetä väriä, varjo ei näy ollenkaan.

inset Valinnainen. Vaihda ulkoinen varjo (outset) sisäiseen varjoon.
initial Aseta tämä ominaisuus sen oletusarvoon. Katso initial
inherit Perii tämän ominaisuuden vanhemmalta elementiltään. Katso inherit

Tekninen yksityiskohta

Oletusarvo: ei mitään
Palautusarvo: merkkijono, joka ilmaisee elementin box-shadow ominaisuus
CSS-versio: CSS3

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki 9.0 Tuki 5.1 Tuki