CSS Box Shadow
- Edellinen sivu CSS varjo
- Seuraava sivu CSS tekstieffektit
CSS box-shadow ominaisuus
CSS box-shadow
属性应用阴影于元素。
最简单的用法是只指定水平阴影和垂直阴影:
带有黑色 box-shadow 的黄色 <div> 元素
Esimerkki
div { box-shadow: 10px 10px; }
接下来,为阴影添加颜色:
带有灰色 box-shadow 的黄色 <div> 元素
Esimerkki
div { box-shadow: 10px 10px grey; }
接下来,向阴影添加模糊效果:
黄色的 <div> 元素,带有模糊的 box-shadow
Esimerkki
div { box-shadow: 10px 10px 5px grey; }
卡片
您还可以使用 box-shadow
属性创建纸质卡片效果:
1
January 1, 2021

Kahvi
Esimerkki
div.card { width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; }
CSS varjo-ominaisuudet
Seuraavassa taulukossa luetellaan CSS:n varjo-ominaisuudet:
Ominaisuus | Kuvaus |
---|---|
box-shadow | Lisää elementtiin yksi tai useita varjoja. |
text-shadow | Lisää tekstiin yksi tai useita varjoja. |
- Edellinen sivu CSS varjo
- Seuraava sivu CSS tekstieffektit