Style property na boxShadow
- Ilang Nakaunang Pahina bottom
- Ilang Susunod na Pahina boxSizing
- Bumalik sa Isang Lebel HTML DOM Style Object
Definition and usage
boxShadow
Property na nagtatakda o nagbibigay ng prosyektong (drop-shadow) sa elementong kahon.
Mga ibang pagkakitaan:
CSS reference manual:property ng palibhasa box-shadow
Mga halimbawa
Magdagdag ng box-shadow sa elementong div:
document.getElementById("myDIV").style.boxShadow = "10px 20px 30px blue";
Syntax
I-balik ang property na boxShadow:
object.style.boxShadow
I-set ang property na boxShadow:
object.style.boxShadow = "none|h-shadow v-shadow blur spread color |inset|initial|inherit"
Komento:boxShadow
Ang attribute na ito ay magdagdag ng isang o ilang shadow sa bawat kahon. Ang property na ito ay isang listahan ng shadow na hinahati ng kumponang, bawat shadow ay binubuo ng 2-4 na halaga ng haba, opsyonal na kulay, at opsyonal na keyword na inset. Ang nilalang na haba ay 0. Wala ang naiwang haba.
Attribute value
Value | Description |
---|---|
none | Default value. Hindi ipapakita ang shadow. |
h-shadow | Kinakailangan. Ang posisyon ng horizontal shadow. Pinapayagan ang mga negatibong halaga. |
v-shadow | Kinakailangan. Ang posisyon ng vertical shadow. Pinapayagan ang mga negatibong halaga. |
blur | Optional. Ang layo ng pagbablura. |
spread | Optional. Ang laki ng shadow. |
color |
Optional. Ang kulay ng shadow. Ang default value ay itim. Makita ang CSS color valuespara sa kumpletong listahan ng posibleng mga kulay. Mga tagubilin:Sa Safari (sa PC),color Ang parameter ay kinakailangan. Kung hindi tinukoy ang kulay, hindi ipapakita ang shadow. |
inset | Optional. Ibaguhin ang panlabas na shadow (outset) sa panloob na shadow. |
initial | I-set ang property na ito sa kanyang default value. Maaari mong makita sa initial。 |
inherit | Mumunuan mula sa kanyang pangkapamilyang elementong ito. Maaari mong makita sa inherit。 |
Detalye teknikal
Default value: | wala |
---|---|
Bilang resulta: | string na naglalarawan ng elementong property ng palibhasa box-shadow。 |
Versyon ng CSS: | CSS3 |
Suporta ng Browser
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Suporta | 9.0 | Suporta | 5.1 | Suporta |
- Ilang Nakaunang Pahina bottom
- Ilang Susunod na Pahina boxSizing
- Bumalik sa Isang Lebel HTML DOM Style Object