html5如何设置阴影_HTML5阴影效果设置与样式技巧【教程】

2、添加box-shadow声明，格式为：box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色；。

立即学习“前端免费学习笔记（深入）”；

3、例如设置右下角浅灰阴影：box-shadow: 4px 4px 8px 0 rgba(0,0,0,0.1);

4、若需内阴影，末尾添加inset关键字：box-shadow: inset 0 -2px 6px rgba(0,0,0,0.08);

二、使用text-shadow为文字添加阴影

text-shadow专用于文本内容，支持单层或多层阴影叠加，常用于标题美化或可读性增强。

1、在包含文本的标签（如

、

、）的CSS规则中添加text-shadow属性。

2、基础语法为：text-shadow: 水平偏移 垂直偏移 模糊半径 颜色；。

3、例如为标题添加柔和黑影：text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

4、多层阴影可用逗号分隔，如描边+外扩：text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;

三、结合filter实现高级阴影效果

filter属性中的drop-shadow()函数可对元素整体（包括透明区域）投射阴影，比box-shadow更灵活，尤其适合不规则图形或PNG图标。

1、在目标元素CSS中写入filter属性。

Inworld.ai

InWorldAI是一个AI角色开发平台，开发者可以创建具有自然语言、上下文意识和多模态的AI角色，并可以继承到游戏和实时媒体中

178

查看详情

2、使用drop-shadow()函数，参数顺序为：水平偏移 垂直偏移 模糊半径 颜色。

3、例如为SVG图标添加自然阴影：filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));

4、注意该函数不支持扩展半径，且部分旧版浏览器需加-webkit-前缀：-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));

四、使用伪元素模拟复杂阴影

当需要非标准方向阴影（如仅底部、双侧）或动态响应式阴影时，可通过::before或::after伪元素绘制绝对定位的阴影形状。

1、为目标元素设置position: relative；确保伪元素能相对于其定位。

2、定义::after伪元素，设置宽高与主元素一致，背景设为半透黑色，并应用transform模拟倾斜阴影。

3、例如创建底部延伸阴影：content: ''; position: absolute; bottom: -10px; left: 10%; width: 80%; height: 12px; background: rgba(0,0,0,0.15); border-radius: 50%; transform: skewX(-15deg);

4、为避免遮挡主内容，设置z-index低于主元素，并添加pointer-events: none；确保交互不受影响。

五、响应式阴影适配不同设备

阴影强度需随屏幕尺寸调整，避免在小屏上过度模糊或在大屏上过于生硬，可通过媒体查询实现分级控制。

1、默认状态下使用适中参数，如box-shadow: 0 2px 6px rgba(0,0,0,0.08)；。

2、在max-width: 768px断点内减小模糊值和偏移量：@media (max-width: 768px) { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

3、在min-width: 1200px断点内增强层次感：@media (min-width: 1200px) { box-shadow: 0 6px 16px rgba(0,0,0,0.12); }

4、对触控设备可进一步降低阴影权重，提升轻量化感知：@media (hover: none) and (pointer: coarse) { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }