CSS3 邊框投影

.box {
box-shadow: 10px 10px 10px #888; /* 偏移量(x軸、y軸) 模糊半徑 顏色 */
}

在 CSS3 中，我們可以使用 box-shadow 屬性為元素添加投影效果。box-shadow 屬性接受四個值：

• 水平偏移量
• 垂直偏移量
• 模糊半徑
• 顏色

水平偏移量和垂直偏移量的數值可以為負數。數值越大，投影距離元素越遠。

模糊半徑指定了投影的模糊程度，數值越大，投影越模糊。

顏色值可以為任意 CSS 顏色值。

.box {
box-shadow: 
10px 10px 10px #888, 
-10px -10px 10px #f00; /* 添加多個投影 */
}

我們還可以為一個元素添加多個投影效果，用逗號隔開即可。

.box {
box-shadow: 
10px 10px 10px #888, 
-10px -10px 10px #f00,
inset 0 0 10px #000; /* 添加 inset 投影 */
}

使用 inset 關鍵字可以創建內部投影效果。