添加一個簡單的陰影

讓我們為投影準備一個簡單的HTML元素：

然后添加CSS：

輸出結果是三個框，通過調用每個框的ID可以很容易地放置陰影。要添加陰影，讓我們將屬性box-shadow賦予框1：

我們提供三個參數。前兩個參數是offset-x和offset-y。兩者都確定投影的位置。相對于元素左上角的位置給出偏移量。偏移x處的正值表示將陰影向右引導，偏移y處的正值表示將陰影向下引導。

第三個參數是所需的陰影顏色。盡管這里我們使用elements

，但是屬性box-shadow可以應用于所有其他HTML元素。

賦予模糊半徑

如果想要陰影看起來更逼真，則可以使用blur-radius參數。此參數將設置我們如何給予陰影模糊效果。讓我們將其應用于方框2：

注意第三個參數，該值4px調整應用于投影的模糊半徑。

提供半徑差數

如果要調整陰影的大小，我們可以添加參數spread-radius以使陰影擴大或縮小。讓我們8px在框2中添加一個半徑擴展：

注意參數的順序。

合并多個陰影

我們甚至可以一次將多個陰影組合到一個元素中。讓框3應用藍色和綠色投影：

制作陰影

我們可以用參數制作一個向內的陰影inset。參數inset可以寫在屬性的開頭或結尾box-shadow。以下示例使用elements blockquote。

我們還可以添加一些模糊和散布以增強陰影：

使用properties box-shadow，我們可以為所創建的網頁提供陰影，從而可以提供良好的3D照明效果。

總結

以上是生活随笔為你收集整理的怎么将多个html组合_技巧分享之在HTML元素中添加逼真阴影的教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。