在網(wǎng)站建設(shè)過(guò)程中框陰影在CSS中相當(dāng)簡(jiǎn)單:聲明box-shadow屬性，設(shè)置陰影偏移量，定義范圍，并給它一個(gè)顏色。這是一個(gè)給原本扁平的設(shè)計(jì)增加深度的好方法。

想象box-shadow但是對(duì)于模糊效果，元素周?chē)谋尘皶?huì)變得模糊，從而逐漸降低模糊的強(qiáng)度。試圖提高一個(gè)黑暗區(qū)域的彈出窗口的對(duì)比度box-shadow從設(shè)計(jì)角度來(lái)說(shuō)，彈出窗口沒(méi)有多大意義。 如果我們有一個(gè)box-blur財(cái)產(chǎn)或者是某種blur我們可以設(shè)置的關(guān)鍵字box-shadow我們?yōu)橹Φ姆绞絠nset陰影。不幸的是，CSS沒(méi)有這樣的屬性。但是因?yàn)镃SS很棒，很靈活，我們?nèi)匀豢梢酝ㄟ^(guò)組合一些CSS功能來(lái)實(shí)現(xiàn)這種效果。

該效果的處理方式是將其應(yīng)用于::before一些元素的偽元素，比如一些彈出窗口/對(duì)話框/彈出窗口/工具提示。這些是這種效應(yīng)的常見(jiàn)“目標(biāo)”。我認(rèn)為在這里使用偽元素是一個(gè)好方法，因?yàn)檫@意味著我們可以在技術(shù)上為偽元素確定樣式的范圍，并在不改變HTML的情況下重新調(diào)整對(duì)其他元素的影響。

梯度在技術(shù)上形象—由瀏覽器生成—可用作CSS遮罩來(lái)隱藏元素的某些部分以創(chuàng)建各種形狀。在這種情況下，這是完美的，因?yàn)槲覀兿ＭЧ鼜?qiáng)，更接近對(duì)象，并隨著對(duì)象的遠(yuǎn)離而減弱強(qiáng)度。我們將使用兩種漸變:一種是水平漸變，另一種是垂直漸變。我選擇這條路線是因?yàn)樗７铝艘粋€(gè)向邊緣淡出的大致矩形形狀。

正如我們所說(shuō)，透明度是關(guān)鍵。兩種梯度都開(kāi)始transparent，然后過(guò)渡到black直到最后一刻，他們回到了transparent淡化事物。記住，這些梯度是面具而不是背景圖像，因此它們是在mask屬性，該屬性控制應(yīng)該呈現(xiàn)哪些像素及其不透明度。