CSS Box Shadow

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
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;
}

Kokeile itse:PaperikorttiKokeile itse:Kuvakortti

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.