CSS邊框陰影的添加方法

在CSS中，我們可以使用box-shadow屬性來添加邊框陰影。box-shadow屬性可以接收四個(gè)參數(shù)，分別是水平偏移、垂直偏移、模糊半徑和擴(kuò)展半徑。

1、水平偏移：這是陰影在水平方向上的距離，正值將陰影向右移動(dòng)，負(fù)值將陰影向左移動(dòng)。

2、垂直偏移：這是陰影在垂直方向上的距離，正值將陰影向下移動(dòng)，負(fù)值將陰影向上移動(dòng)。

3、模糊半徑：這是陰影的模糊程度，值越大，陰影越模糊；值越小，陰影越清晰。

4、擴(kuò)展半徑：這是陰影的大小，正值會(huì)使陰影變大，負(fù)值會(huì)使陰影變小。

如果我們想要一個(gè)向右下方移動(dòng)的清晰陰影，可以這樣寫：

div {
    box-shadow: 5px 5px 0 0 #000;
}

在這個(gè)例子中，5px 5px表示陰影在水平和垂直方向上都移動(dòng)了5像素，0 0表示沒有模糊和擴(kuò)展效果，#000表示陰影的顏色是黑色。

如果想要更復(fù)雜的陰影效果，比如一個(gè)向右上方移動(dòng)的模糊陰影，可以這樣寫：

div {
    box-shadow: 10px -10px 5px 5px #ff0000;
}

在這個(gè)例子中，10px -10px表示陰影在水平方向上向右移動(dòng)10像素，在垂直方向上向上移動(dòng)10像素，5px 5px表示模糊半徑和擴(kuò)展半徑都是5像素，#ff0000表示陰影的顏色是紅色。

通過調(diào)整這些參數(shù)，我們可以輕松實(shí)現(xiàn)各種樣式的邊框陰影效果。