box-shadow屬性通過(guò)設(shè)置水平垂直偏移、模糊擴(kuò)散半徑、顏色及內(nèi)外投影方式，可實(shí)現(xiàn)立體陰影效果；常用rgba色值控制透明度，結(jié)合transition增強(qiáng)交互，注意性能與多陰影層疊順序。

CSS 中的 box-shadow 屬性可以為元素添加陰影效果，讓頁(yè)面更具立體感和視覺(jué)層次。使用起來(lái)簡(jiǎn)單靈活，掌握基本語(yǔ)法和參數(shù)就能實(shí)現(xiàn)多種陰影樣式。

基本語(yǔ)法

box-shadow 的基本寫法如下：

其中前兩個(gè)值是必需的，其余可選。常見(jiàn)用法示例：

Narration Box

Narration Box是一種語(yǔ)音生成服務(wù)，用戶可以創(chuàng)建畫外音、旁白、有聲讀物、音頻頁(yè)面、播客等

27

查看詳情

• 水平偏移（x-offset）：正值向右，負(fù)值向左
• 垂直偏移（y-offset）：正值向下，負(fù)值向上
• 模糊半徑（blur）：值越大，陰影越模糊，不能為負(fù)
• 擴(kuò)散半徑（spread）：正數(shù)擴(kuò)大陰影，負(fù)數(shù)縮小，可不寫，默認(rèn)為0
• 顏色：支持 hex、rgb、rgba 等格式，推薦用 rgba 控制透明度
• 投影方式：可選 inset 實(shí)現(xiàn)內(nèi)陰影，不寫則為外陰影

常見(jiàn)應(yīng)用示例

通過(guò)調(diào)整參數(shù)，可以實(shí)現(xiàn)不同風(fēng)格的陰影效果：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

• 輕微外陰影：
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
• 懸浮效果：
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
• 內(nèi)陰影：
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
• 雙層陰影：
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);

實(shí)用技巧

想讓陰影更自然、適配設(shè)計(jì)風(fēng)格，注意這些細(xì)節(jié)：

• 使用 rgba 顏色 控制透明度，避免陰影太生硬
• 配合 transition 實(shí)現(xiàn)鼠標(biāo)懸停時(shí)的動(dòng)態(tài)陰影變化
• 移動(dòng)端注意陰影性能，避免過(guò)度模糊影響渲染
• 多個(gè)陰影用逗號(hào)分隔，順序會(huì)影響層疊效果

以上就是如何用css設(shè)置元素陰影box-shadow的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！