添加一個(gè)簡(jiǎn)單的陰影

讓我們?yōu)橥队皽?zhǔn)備一個(gè)簡(jiǎn)單的HTML元素：

然后添加CSS：

輸出結(jié)果是三個(gè)框，通過(guò)調(diào)用每個(gè)框的ID可以很容易地放置陰影。要添加陰影，讓我們將屬性box-shadow賦予框1：

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

第三個(gè)參數(shù)是所需的陰影顏色。盡管這里我們使用elements

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

賦予模糊半徑

如果想要陰影看起來(lái)更逼真，則可以使用blur-radius參數(shù)。此參數(shù)將設(shè)置我們?nèi)绾谓o予陰影模糊效果。讓我們將其應(yīng)用于方框2：

注意第三個(gè)參數(shù)，該值4px調(diào)整應(yīng)用于投影的模糊半徑。

提供半徑差數(shù)

如果要調(diào)整陰影的大小，我們可以添加參數(shù)spread-radius以使陰影擴(kuò)大或縮小。讓我們8px在框2中添加一個(gè)半徑擴(kuò)展：

注意參數(shù)的順序。

合并多個(gè)陰影

我們甚至可以一次將多個(gè)陰影組合到一個(gè)元素中。讓框3應(yīng)用藍(lán)色和綠色投影：

制作陰影

我們可以用參數(shù)制作一個(gè)向內(nèi)的陰影inset。參數(shù)inset可以寫在屬性的開頭或結(jié)尾box-shadow。以下示例使用elements blockquote。

我們還可以添加一些模糊和散布以增強(qiáng)陰影：

使用properties box-shadow，我們可以為所創(chuàng)建的網(wǎng)頁(yè)提供陰影，從而可以提供良好的3D照明效果。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。