企业官网建设流程全解析

• 前端
• 文档
• 教程

本篇指南以开源仓库 You-need-to-know-css 的「常见投影」文档（zh-cn/single-projection.md）为核心，系统讲解如何仅用一个box-shadow属性，实现无偏移投影、单侧投影、邻边投影、两侧投影和 1px 投影五种高频视觉效果。读完本文，你将掌握box-shadow五个关键参数的配合规律（尤其是负扩张半径的妙用），并拿到可直接复制到项目中的完整 CSS 代码。

box-shadow：投影效果的五个关键参数

box-shadow是 CSS 中最常用的投影工具，其完整语法如下：

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

各参数的作用如下：

此外，box-shadow支持用逗号分隔多个阴影声明，例如box-shadow: 0 0 4px #000, 0 0 8px #fff;可以同时投射多个阴影——这正是本文「两侧投影」的基石。

仓库中的交互式演示：如何运行与阅读

You-need-to-know-css 仓库使用 docsify 构建文档站点，每个技巧页面通过<vuep template="#single-projection"></vuep>挂载一个可交互的 CSS 演示编辑器（模板以<script v-pre type="text/x-template" id="single-projection">的形式内嵌在 Markdown 中，由 index.html 引入的vuep.min.js、vue.min.js与babel.min.js负责编译渲染）。读者可以在页面上直接修改 CSS 并即时预览效果，这也是本仓库文档「可复制粘贴、可动手调试」的设计理念。

本地启动方式（依据仓库 README.md）：

npm install docsify-cli -g # 或 yarn global add docsify-cli docsify serve # 在仓库根目录执行 # 浏览器打开 http://localhost:3000

「常见投影」这一页在侧边栏（zh-cn/_sidebar.md）中位于「视觉效果」分类下，与不规则投影、毛玻璃效果等同组。

五种常见投影的实现

原始文档用五组.projection:nth-of-type(n) > div选择器依次演示了五种投影。所有演示元素统一为180px × 120px的矩形，背景色为半透明的rgba(180,160,120,.2)（仓库示例统一参考网易严选设计规范配色，见 zh-cn/introduce.md）。

① 无偏移投影：向四周均匀扩散的柔和阴影

.projection:nth-of-type(1) > div { margin-left: -6px; box-shadow: 0 0 6px rgba(180,160,120,.8); }

水平偏移与垂直偏移均为0，模糊半径6px，此时阴影以元素为中心向四周均匀扩散，形成类似「元素悬浮在画布上方」的柔和投影。margin-left: -6px是为了抵消阴影向外扩散 6px 造成的视觉位移，让元素在页面中的观感位置保持居中。

② 单侧投影：负扩张半径隐藏多余阴影

这是本文最核心的技巧。若只写box-shadow: 0 6px 5px rgba(180,160,120,.6);（向下偏移 6px、模糊 5px），阴影会同时出现在底部以及顶部、左右两侧的微弱渐变中，效果不干净。真正的单侧投影写法是：

.projection:nth-of-type(2) > div { border-bottom: 0; box-shadow: 0px 6px 5px -5px rgba(180,160,120,.6); }

关键在最后一个参数-5px：负的扩张半径会把阴影向元素内侧收缩 5px。结合向下偏移的6px，收缩后的阴影矩形在水平方向被完全拉回元素内部、不可见；而底部由于偏移量大于收缩量，恰好露出一条 6px 宽的渐变阴影带。这套「偏移量 + 模糊半径 + 负扩张半径」的组合规律是单侧投影的通用范式：偏移量决定阴影出现在哪一侧，负扩张半径决定其余三边被隐藏的程度。

③ 邻边投影：只保留相邻两条边

.projection:nth-of-type(3) > div { border-right: 0; border-bottom: 0; box-shadow: 5px 5px 5px -4px rgba(180,160,120,.6); }

将水平、垂直偏移同时设为5px，并配以-4px的负扩张半径。阴影同时向右、向下两个方向偏移，扩张半径向内收缩后，左上两条边的阴影被隐藏，最终只保留右下两条相邻边的投影，形成「元素从右下方被托起」的立体感。

④ 两侧投影：逗号分隔的多重阴影

.projection:nth-of-type(4) > div { border-right: 0; border-left: 0; box-shadow: 6px 0 5px -5px rgba(180,160,120,.6), -6px 0 5px -5px rgba(180,160,120,.6); }

当需要左右两侧同时出现投影时，一次box-shadow无法满足——它只能向一个方向偏移。解法是用逗号分隔两个阴影：一个向右偏移6px，一个向左偏移-6px，各自配合-5px的负扩张半径，把上下两边的阴影收缩隐藏。两侧投影在导航栏、卡片列表等 UI 中常用于强化「左右留白分割」的层次感。

⑤ 1px 投影：用扩张半径绘制精致细线

.projection:nth-of-type(5) > div { box-shadow: 0 0 0 1px rgba(180,160,120,.6); }

水平偏移、垂直偏移、模糊半径全部为0，仅保留1px的扩张半径。零偏移、零模糊意味着阴影没有渐变，扩张半径使阴影沿元素边缘向外扩大 1px——视觉上得到一条与元素边界完全重合的锐利细线，效果等同于 1px 实线描边。这条技巧是「用 box-shadow 画边框」的基础，仓库中的多重边框文档正是利用多层0 0 0 Npx阴影叠加出同心圆环边框，而1px 线/边文档则进一步结合transform: scaleY(.5)与min-resolution媒体查询，在高清屏上实现物理像素级的 1px 线条。

支撑细节：透明边框与 background-clip 的作用

细读演示代码会发现，除第 ① 组外，其余演示元素都套用了这样一组基础样式：

.projection:not(:first-child:last-child) > div { border: 2px solid transparent; background-clip: content-box; }

.projection中的每个演示容器都包含一个<p>标签与一个<div>元素，因此<div>不会同时命中:first-child与:last-child，这条规则实际作用于所有演示矩形。它的作用是：为元素套上一层2px的透明边框，并通过background-clip: content-box把背景裁剪到内容区域，使半透明背景与元素边界之间留出 2px 的透明间隙——投影绘制在边框盒外侧，这样阴影就不会紧贴背景边缘，视觉上更干净、更有「分离感」。这与仓库中半透明边框文档讲解的background-clip原理一脉相承。

同时可以看到，第 ②③④ 组分别写了border-bottom: 0、border-right: 0、border-left: 0：在哪一侧需要投影，就把该侧的透明边框去掉，让背景与阴影在该侧直接衔接，阴影紧贴元素边缘，效果更自然。

浏览器支持与兼容性说明

box-shadow属于 CSS 中成熟已久的能力，现代浏览器（Chrome、Firefox、Safari、Edge）均完整支持，原始文档通过 caniuse 的css-boxshadow数据 iframe 内嵌了浏览器支持详情。需要留意两点（依据 zh-cn/introduce.md 的说明）：

• 仓库文档中的示例样式均未添加浏览器私有前缀，建议直接在 Chrome、Firefox 等主流浏览器中体验；
• 生产环境如需兼容更老的浏览器，建议使用 Autoprefixer 等工具自动补齐前缀。

延伸：box-shadow 在仓库其他主题中的运用

box-shadow的能力远不止投影本身，You-need-to-know-css 仓库中有多个主题围绕它展开，可作为深入学习路径：

• 多重边框：利用0 0 0 Npx的扩张半径叠加多层「边框」，并补充outline与outline-offset实现虚线描边的方案；
• 边框内圆角：利用box-shadow填补outline与圆角之间的间隙；
• 通过阴影弱化背景：利用box-shadow: 0 0 0 50vmax rgba(0,0,0,.8)的巨型扩张半径充当弹窗遮罩；
• 不规则投影：当元素包含伪元素、虚线边框、border-image等不规则形状时，改用filter: drop-shadow()让投影贴合真实轮廓；
• 1px 线/边：box-shadow与transform结合，在高分屏上绘制物理 1px 线条。

掌握本文的五种组合（无偏移、单侧、邻边、两侧、1px），再结合上述延伸主题，就能用最少的 CSS 属性覆盖绝大多数日常投影与描边需求。

• 前端
• 文档
• 教程