CSS Box Shadow：

Αξία box-shadow CSS

CSS： box-shadow 属性应用阴影于元素。

最简单的用法是只指定水平阴影和垂直阴影：

带有黑色 box-shadow 的黄色 <div> 元素：

Παράδειγμα

div {
  box-shadow: 10px 10px;
}

亲自试一试：

接下来，为阴影添加颜色：

带有灰色 box-shadow 的黄色 <div> 元素：

Παράδειγμα

div {
  box-shadow: 10px 10px grey;
}

亲自试一试：

接下来，向阴影添加模糊效果：

黄色的 <div> 元素，带有模糊的 box-shadow：

Παράδειγμα

div {
  box-shadow: 10px 10px 5px grey;
}

亲自试一试：

卡片：

您还可以使用： box-shadow 创建纸质卡片效果的属性：

1
January 1, 2021
Καφέ
Καφέ

Παράδειγμα

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

Η παρακάτω τаблицή περιλαμβάνει τις ιδιότητες σκιάς του CSS:

Πρότυπο Περιγραφή
box-shadow Προσθέστε μια ή περισσότερες σκιάς σε ένα στοιχείο.
text-shadow Προσθέστε μια ή περισσότερες σκιάς στο κείμενο.