面板边缘偏重时，我会先分清正在看的暗部：它是轮廓、接触阴影，还是整片表面的明度？混在一起调整，减轻阴影可能连形状都变得难以辨认。

我倾向先确定轮廓，再决定距离与材质。以下从同一道 ring 的宽度开始，逐步加入深度、表面与透光，每次只改变有意比较的关系。

本文由原篇重编并扩充。样例数值代表当时条件，并非所有界面的固定规格；系列背景与工具入口见 总论。

轮廓与深度

让同一道轮廓变窄

我希望一眼看得出面板从哪里开始，边缘又不至于像一圈硬框。这组试样用零模糊的外侧阴影画出 ring，另外用其他阴影处理深度。Ring 的宽度与透明度可以独立调整，不占布局空间，也能保留利落的外形。

先只改 ring 的宽度，观察它变窄后的分量。第一张把扩散值（spread）由 1 px 改成 0.5 px，暗色、12% 不透明度、底色与尺寸全部固定，也不加入深度阴影。这里的 hairline 就是同一道 ring 变细，没有另外多画一条线。

两张尺寸与底色相同的白色卡片，左侧 ring 为一像素，右侧为零点五像素，不透明度同为百分之十二，没有深度阴影。
只改 ring 宽度。Hairline 是同一道轮廓变窄，没有再叠上一条线。

变窄之后，再决定要多清楚

轮廓变细后，如果辨识度不足，可以再调不透明度。第二张固定 0.5 px，只比较 12% 与 18%；形状、填色与阴影保持一致。右侧的轮廓更清楚，宽度仍然相同。

这组实心表面仍以 0.5 px、12% 的中性暗色 ring 为起点，18% 只是用来观察补偿效果。大面板、白色选中面与玻璃所在的背景不同，要配合各自背景决定边界强度，不能因为线宽减半，就把透明度一律乘上固定倍数。

两张白色卡片都使用零点五像素的 ring，左侧不透明度百分之十二，右侧百分之十八，只有轮廓深浅不同。
固定线宽，再比较透明度。边界可以更清楚，不必重新加宽。

0.5 px 也要看用在哪里。border-width 会依设备像素对齐；box-shadow 的小数 spread 则可能通过部分像素覆盖呈现，两者不能当成同一种画法。这组试样的 WebKit 1× 检查里，0.25 px ring 在直边处没有画出可辨识的边，0.5 px 也有左右分量不均的情况。细化后仍要连同原尺寸、像素密度与缩放一起看。

沿着轮廓分配明暗

轮廓的分量也可以沿着形状改变。前面的 ring 整圈保持同样深浅，这里则把边缘对比（edge contrast）沿着形状分配，让某些位置稍微退后，另一些位置收得清楚。我偏好把这种差异留在窄边里，中央的表面仍然安静。

这组试样把边界宽度固定在 0.5 px。左侧整圈使用 12% 不透明度，右侧在 6% 到 18% 之间分布；表面填色、尺寸与背后图形都相同。浅色用暗轮廓，左上较淡、右下稍重，变化沿着直边与转角一起走。

浅色半透明卡片比较均匀轮廓与方向性轮廓，两者外侧宽度都是零点五像素，右侧只改变沿边缘的透明度分布，下方放大同一个转角。
窄边保持同样宽度，明暗沿着轮廓分配。中央的填色与透光程度不变。

这里用遮罩合成（mask compositing）挖空中央，只留下外侧窄环，让渐变沿着这个范围绘制。它承接前面 ring 确定外形的工作，并把明暗的分布交给渐变。背后斜向灰带仍以同样方式透过表面，边缘处理没有顺带把整张卡片盖深。

暗色试样改用亮轮廓，明暗方向也跟着反转：左上稍亮，往右下退淡，维持相同的进光暗示。我会连同底面一起看，让轮廓刚好交代形状，不沿整圈堆上一样重的亮线。

暗色卡片的零点五像素亮轮廓对照，左侧整圈均匀，右侧左上较亮、右下较淡，背后灰带与表面填色相同。
底面变暗时，亮轮廓的分布也要回到同一个光向判断。

固定内容面仍可用均匀的淡 ring 稳住外形。方向性的变化比较适合少数需要材质暗示的浮动片；若每张卡片都强调同一个转角，边缘就会抢走内容的注意力。

轮廓确定形状，柔影交代距离

Ring 已经收住外形，深度阴影（depth shadow）就可以退后一点。这里另外放两层：近影偏移 1 px、模糊 2 px，以 −1 px 扩散值收窄；远影偏移 3 px、模糊 8 px，以 −3 px 扩散值限制范围。不透明度分别是 4% 与 2%。

近影交代接触，远影让暗部柔和退回底面。这段衰减（falloff）需要和 ring 一起看：如果下缘堆成一条深线，通常要调整近影的重量或范围；整圈发灰，则要检查远影有没有扩得太满。我偏好表面贴得住，边缘外侧很快恢复干净。

白色面板局部放大四倍，上方引线指向零点五像素零模糊 ring，下方引线指向下缘附近由近影与扩散柔影组成的淡影。
同一个边缘有三个工作：ring 收形，近影接触，远影淡出。

实心表面不再默认加一圈内缘光（inner light）。近白面板已经够亮，稍深的底槽若再叠白光，容易显出硬亮边。我会先用轮廓、底色和阴影把层次做好，把亮缘留给确实需要交代材质的局部。

暗色表面先靠明度站出来

换到暗色时，我会先把上层表面稍微提亮。图中的底面是 #171717，卡片是 #242424，再加 0.5 px、12% 白色 ring；黑色深度阴影独立放在下方。卡片的存在感先来自表面差异，细线再补出轮廓。

深灰底面承接较亮的暗色卡片，卡片外侧是零点五像素的淡白 ring，下方另有短黑影，两组引线标注轮廓与抬亮的表面。
先拉开表面明度，再补一圈很细的亮轮廓；不把白光铺进整个内缘。

表面与材质

相近的白，各有工作

表面层级（surface hierarchy）可以先从明度分工。这组亮色试样的画布是 #F7F7F7，外壳是几乎中性的 #F1F1F2，内容面是 #FCFCFC，白色留给部分操作面。色偏很少，差别也要连同露出的面积一起看：窄窄一圈灰和大片灰底，分量并不相同。

近白工作面被淡灰外壳包住，里面排列摘要与白色操作按钮，引线标注外壳 F1F1F2 与工作面 FCFCFC。
外壳、内容面与操作面各有角色，低对比主要留给底色。

文字仍要有清楚的主次。名称、数字与当前选项用深色站稳，说明再退后一级。我喜欢表面安静，但不希望读取信息也需要仔细寻找。

让渐变慢慢接回平面

有些表面需要一点明暗过渡，我会看渐变如何开始、又如何回到底色。缓动渐变（eased gradient）调整的是空间里的变化速度：接近平面时慢一些，中间再加快，让起止的位置不那么容易被察觉。画面本身保持静止。

这组对照使用相同中性色，最大不透明度都是 16%，渐变范围都在面板的 20% 到 80% 之间。左侧以固定速度退到零，右侧采用缓动分布；两边都用 33 个色标，不透明度的积分也相同。差异来自明暗如何分布，整体分量没有一起减少。

浅色面板比较线性与缓动渐变，端点、范围和透明度总量相同，下方曲线显示右侧在起止附近变化较慢。
端点相同，过渡速度不同。下方曲线对应同一段渐变的透明度分布。

图中的线性渐变接到平面时，变化速度突然停下；缓动分布则在附近逐渐放慢。暗色对照沿用相同关系，让微弱的亮度慢慢退回深灰。

暗色面板以相同端点与透明度总量比较线性和缓动衰减，右侧的明暗在接近平面时逐渐放慢，下方附分布曲线。
同样的过渡关系放到暗面，仍要看它如何融回原本的底色。

这里用中间色标近似平滑函数，实际 CSS 仍在相邻色标之间线性插值。16% 是方便观察差异的试样取值；放回洁白界面，我会按面积降低分量，把它留给窄小的遮罩退场或材质过渡。这组比较只说明衰减的接点，没有把色标数量当成解决所有色带问题的方法。

让玻璃有具体的位置

我把少量玻璃感留给浮动工具：72% 不透明度的近白填色、10 px 背景模糊（backdrop blur），加上清楚的前景文字与图标。工具栏跨过容器下缘，底下的明暗才能透出；位置避开主要数据行，材质也有了实际的交界。

玻璃用 0.5 px、6% 中性暗色 ring 收住轮廓，内侧只留柔化的微光。下方三层淡影从接触处接到 24 px 模糊的外围，让悬浮感向外散开。这里的 ring 比实心组件更淡，透明表面已经会借用背景明暗，不需要再加一圈深边。

实心项目面板与跨过下缘的半透明工具栏放大一点五倍，工具栏有淡暗 ring、内侧微光和向外发散的柔影，背景柔化而前景清楚。
淡暗轮廓交代边界，发散柔影交代距离。内缘光只留在这种有材质作用的局部。

我会用它真正跨过的背景检查：全白底可能只剩轮廓，底下太繁杂又可能干扰文字。这组示意只呈现透光与柔化，不模拟真正的折射。

回到实际界面，我会依次看轮廓能否辨认、阴影是否交代距离，以及材质有没有妨碍内容。这个顺序让细化有明确对象；半像素与透明度都只是起点，不是每个背景都适用的答案。