CSS如何寫陰影？

CSS中的陰影效果可以通過box-shadow屬性來實(shí)現(xiàn)。box-shadow屬性可以添加多個(gè)陰影，并且可以設(shè)置陰影的顏色、模糊半徑、陰影的偏移距離等參數(shù)。

下面是一個(gè)簡(jiǎn)單的例子，展示了如何給一個(gè)元素添加陰影：

div {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  box-shadow: 10px 10px 5px #666;
}

在上面的例子中，box-shadow屬性的值10px 10px 5px #666表示：水平偏移10px，垂直偏移10px，模糊半徑5px，陰影顏色為#666（深灰色）。

如果想要添加多個(gè)陰影，可以使用逗號(hào)隔開每個(gè)陰影的定義：

div {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  box-shadow: 10px 10px 5px #666, -10px -10px 5px #999;
}

在上面的例子中，元素添加了兩個(gè)陰影，一個(gè)深灰色，一個(gè)淺灰色。

除了box-shadow屬性，CSS還提供了text-shadow屬性，用于給文本添加陰影。text-shadow屬性的用法與box-shadow類似，只是作用于文本內(nèi)容。

p {
  color: #333;
  text-shadow: 2px 2px 4px #999;
}

在上面的例子中，段落文本添加了一個(gè)淺灰色的陰影。

通過CSS的box-shadow和text-shadow屬性，我們可以輕松地給元素和文本添加陰影效果，使網(wǎng)頁更加生動(dòng)有趣。