CSS text-shadow ominaisuus
- Edellinen sivu Tekstivynytys
- Seuraava sivu text-transform
Määrittely ja käyttö
text-shadow-ominaisuus asettaa varjon tekstiin.
Katso myös:
CSS3 -opetus:CSS3 tekstiefektit
HTML DOM -viittausoppas:textShadow-ominaisuus
Esimerkki
Perustavanlaatuiset tekstin varjostusefektit:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Lisää esimerkkejä sivun alaosassa.
CSS-kieli
text-shadow: h-shadow v-shadow blur color;
Huomautus:text-shadow-ominaisuus lisää yhtä tai useampia varjoja tekstiin. Tämä ominaisuus on pilkkuera osa varjojen luetteloa, jossa jokaisella varjolla on kaksi tai kolme pituusarvoa ja valinnainen väriarvo. Ohitettu pituusarvo on 0.
Ominaisuuden arvo
| Arvo | Kuvaus | Testi |
|---|---|---|
| h-shadow | Välttämätön. Horisontaalinen varjon sijainti. Sallii negatiiviset arvot. | Testi |
| v-shadow | Välttämätön. Vertikaalinen varjon sijainti. Sallii negatiiviset arvot. | Testi |
| blur | Valinnainen. Hämärtyksen etäisyys. | Testi |
| color | Valinnainen. Varjon väri. Katso CSS väriarvot. | Testi |
Tekninen yksityiskohta
| Oletusarvo: | ei ole |
|---|---|
| Perinnäisyys: | kyllä |
| Versio: | CSS3 |
| JavaScript-kieli: | object.style.textShadow="2px 2px #ff0000" |
Lisää esimerkkejä
- Hämärtyvä vaikutus tekstin varjostuksessa
- Tämä esimerkki näyttää hämärtävän vaikutuksen tekstin varjostuksessa.
- Varjostus valkoisella tekstillä
- Tämä esimerkki näyttää varjostuksen valkoisella tekstillä.
- Neonvaikutteinen tekstin varjostus
- Tämä esimerkki näyttää neonvaikutteisen tekstin varjostuksen.
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka täysin tukee tätä ominaisuutta.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
- Edellinen sivu Tekstivynytys
- Seuraava sivu text-transform
