如何給CSS盒子添加陰影？

在CSS中，我們可以使用box-shadow屬性給盒子添加陰影，這個(gè)屬性接受四個(gè)值，分別是水平偏移、垂直偏移、模糊半徑和顏色，下面是一個(gè)簡(jiǎn)單的例子：

.box {
    width: 200px;
    height: 200px;
    background-color: #f00;
    box-shadow: 10px 10px 5px #000;
}

在這個(gè)例子中，.box類定義了一個(gè)盒子，盒子的寬度和高度都是200像素，背景顏色是紅色。box-shadow屬性給盒子添加了一個(gè)陰影，陰影的水平偏移和垂直偏移都是10像素，模糊半徑是5像素，顏色是黑色。

你可以根據(jù)需要調(diào)整這些值，以改變陰影的大小、方向和顏色，如果你想要一個(gè)更大的陰影，你可以增加水平偏移和垂直偏移的值；如果你想要一個(gè)更模糊的陰影，你可以增加模糊半徑的值，顏色也可以根據(jù)你的設(shè)計(jì)需求來(lái)選擇。

除了box-shadow屬性，CSS還提供了其他與陰影相關(guān)的屬性，如text-shadow和filter。text-shadow屬性可以給文本添加陰影，而filter屬性則提供了更復(fù)雜的陰影效果，包括多個(gè)陰影層。

給CSS盒子添加陰影是一個(gè)簡(jiǎn)單而有效的方法，可以讓你的設(shè)計(jì)更加有趣和吸引人，通過(guò)調(diào)整box-shadow屬性的值，你可以輕松地控制陰影的大小、方向和顏色，從而創(chuàng)造出符合你需求的視覺效果。