在CSS3中，陰影制作變得更加簡便。通過box-shadow屬性，我們可以輕易地在元素周圍添加陰影效果。下面就是一個手繪的CSS3陰影教程，讓大家更加了解CSS3陰影的制作方法。

/* 給h1元素添加右下方陰影效果 */
h1 {
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
/* 給p元素添加多重陰影效果 */
p {
box-shadow: 
2px 2px 2px rgba(0, 0, 0, 0.5),
-2px -2px 2px rgba(255, 255, 255, 0.4);
}
/* 給div元素添加模糊效果 */
div {
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}

上述代碼中，box-shadow屬性的語法包括四個值：

• 水平偏移量：陰影的水平位置。可以是負值（陰影位于元素左側）。
• 垂直偏移量：陰影的垂直位置。可以是負值（陰影位于元素上方）。
• 模糊半徑：陰影的模糊程度。值越大，陰影越模糊，可以為0。
• 陰影基色：陰影的顏色和透明度。可以使用rgba()函數來定義。

通過設置多個box-shadow屬性，可以為元素添加多重陰影效果，其中多重陰影的層次和順序按照語法書寫的順序來決定。另外，由于box-shadow屬性的瀏覽器兼容性較好，我們可以大膽地使用它來制作網頁中的陰影效果。