在网页样式开发中，阴影能明显提升层次感和可读性。很多人搜索css3设置阴影，核心需求其实不是只看几个例子，而是想知道box-shadow到底怎么写、参数顺序怎么理解、不同场景该用什么数值，以及阴影不自然或不显示时该怎么改。本文将以box-shadow为主线，按语法拆解、设置步骤、现成代码和常见问题逐项说明，帮助你更快写出稳定、干净的阴影效果。

CSS3中常见的阴影主要有两类，一类是给盒子元素添加阴影的box-shadow，另一类是给文字添加阴影的text-shadow。本文重点讲box-shadow，因为按钮、卡片、图片容器、输入框、弹窗等大多数界面层次感，都是靠它建立的。实际开发中，很多人虽然知道可以加阴影，但经常分不清水平偏移、垂直偏移、模糊半径和扩展半径分别控制什么，结果要么阴影太硬，要么阴影太脏。先理解box-shadow的结构，再按场景调参数，才是css3设置阴影最实用的思路。text-shadow可以作为补充使用，但不应抢占盒子阴影的主体位置。

• box-shadow用于元素容器阴影，是本文重点
• text-shadow主要用于文字强调，只做补充说明
• 阴影不是越重越好，重点是层次自然、边缘干净

box-shadow的完整常见写法为：box-shadow: x-offset y-offset blur spread color inset;。其中x-offset表示水平偏移，正值向右、负值向左；y-offset表示垂直偏移，正值向下、负值向上；blur表示模糊半径，值越大边缘越柔和；spread表示扩展半径，控制阴影整体放大或收索；color表示阴影颜色，通常建议使用rgba；inset是可选值，表示把外阴影改成内阴影。实际书写时，spread和inset都不是必填，所以你会看到很多简写形式，例如只写偏移、模糊和颜色。参数顺序不要随意交换，尤其是颜色和inset虽然位置相对灵活，但偏移、模糊、扩展的数值顺序最好固定，便于阅读和维护。

• 基础写法：box-shadow: 0 2px 8px rgba(0,0,0,0.12);
• 带扩展半径：box-shadow: 0 8px 20px 2px rgba(0,0,0,0.14);
• 内阴影写法：box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);

如果你是从零开始设置阴影，最稳妥的方法可以分成3步。第一步，先定方向，大多数常规界面阴影都在元素下方，因此通常从0 2px开始测试，也就是水平不偏移、垂直轻微向下。第二步，再定柔和程度，模糊值可以从6px到16px之间逐步增加，按钮一般更小，卡片和弹窗可以更大。第三步，最后定颜色透明度，推荐优先用rgba(0,0,0,0.08)到rgba(0,0,0,0.18)之间的透明黑，先看整体层次，再决定是否加spread。这样调比一开始堆大数值更容易控制结果。若阴影太重，就先降透明度；若离主体太远，就先减小y-offset；若边缘太硬，就继续加blur。

• 第1步先确定偏移：常见起点是0 2px
• 第2步再调模糊：按钮小一些，卡片和弹窗大一些
• 第3步最后调透明度：优先降低颜色浓度，再考虑改范围

只讲概念不够，实际开发更需要能直接照用的代码。按钮通常需要轻微阴影来强化可点击感，卡片需要柔和阴影来拉开模块层级，弹窗则需要更大范围的阴影来和背景分离。下面这些写法都属于比较常见、容易落地的起点值，你可以直接放进项目，再根据背景颜色做微调。对于白色背景界面，建议先用浅透明度阴影；对于灰底或彩色底界面，可以稍微提高透明度，但仍然不建议一次拉得太重。

• 按钮：box-shadow: 0 2px 6px rgba(0,0,0,0.12);
• 卡片：box-shadow: 0 4px 14px rgba(0,0,0,0.10);
• 弹窗：box-shadow: 0 12px 32px rgba(0,0,0,0.18);

box-shadow不只能写一个阴影，还可以通过逗号分隔叠加多个阴影，这在做更细腻的层次时非常常见。例如一个卡片可以同时拥有靠近边缘的轻阴影和更大范围的环境阴影，让过渡更自然。多个阴影的语法本质上就是连续写多组box-shadow参数。除了外阴影，inset还能制造输入框、面板凹陷感或内边缘高光效果。外阴影适合做浮起感，内阴影适合做压下去的感觉，两者不要混为一谈。若一个元素既需要外层层次又需要内部细节，也可以把普通阴影和inset阴影组合使用。

• 多重阴影示例：box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.12);
• 输入框内阴影：box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
• 外阴影强调悬浮感，inset强调凹陷感

如果页面里还需要给标题或横幅文案加阴影，可以简单使用text-shadow，但它只是css3设置阴影中的补充能力，不是本文主体。text-shadow常见语法为水平偏移、垂直偏移、模糊半径和颜色，例如text-shadow: 1px 1px 2px rgba(0,0,0,0.3);。与box-shadow相比，它没有扩展半径，也更容易影响文字清晰度，所以正文大段文字通常不建议使用过重阴影。更适合它的场景是浅色标题压在图片背景上，或者需要稍微提升识别度的短句文案。

• 基础写法：text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
• 正文文字尽量少用重阴影，避免发虚
• 图片上的浅色标题可用轻量text-shadow增强可读性

很多时候不是不会写box-shadow，而是写出来的效果不对。常见情况可以直接对照调整：如果阴影太重、页面显得脏，优先降低颜色透明度，比如从0.18降到0.10；如果阴影离元素太远，看起来像漂浮过头，就减小y-offset；如果边缘太生硬，就增加blur；如果整体范围太大压住周围内容，就减小spread或直接去掉spread。调试时不要同时大改四五个参数，最好一次只改一个维度，这样更容易判断到底是哪一项导致视觉问题。

• 阴影太重：先降rgba透明度或减小模糊范围
• 阴影太远：减小垂直偏移y-offset
• 阴影太硬：增加blur，减少边缘生硬感

用户在实际开发里遇到的问题往往比语法本身更具体。第一，阴影不显示，常见原因是颜色透明度过低、元素背景和阴影太接近，或者元素本身没有足够对比度。第二，阴影被裁切，常见原因是父级设置了overflow: hidden;，尤其在卡片列表、轮播和自定义容器中非常多见。第三，多个阴影写法报错或效果异常，通常是忘记用逗号分隔每组阴影。第四，在透明背景或图片背景上阴影发灰，往往是颜色过深且模糊过大，需要同时降低透明度和模糊值。第五，移动端界面看起来发闷，通常是阴影面积过大、组件间距又太小，应该统一收轻，而不是继续叠加层数。把这些高频问题单独理解后，设置阴影会顺手很多。

• 阴影不显示：检查透明度、背景对比度和元素尺寸
• 阴影被裁切：重点排查父级是否设置overflow: hidden
• 多重阴影异常：确认每组阴影之间使用逗号分隔

学会css3设置阴影，关键不是背几个固定数值，而是理解box-shadow的参数顺序、调节逻辑和常见场景写法。先用基础结构把按钮、卡片、弹窗的阴影做对，再根据页面背景微调透明度、偏移和模糊值，基本就能覆盖大多数开发需求。至于text-shadow，知道它的基础用法即可，真正决定界面层次感的核心仍然是box-shadow。

《夸克》非常好用的免费AI浏览器

下载APP查看