面板的邊緣太重時，我會先分清楚正在看的暗部：它是輪廓、接觸陰影，還是整片表面的明度？這三件事若混在一起調，減輕陰影可能連形狀都變得難以辨認。

我偏好先穩住輪廓，再決定距離與材質。以下從同一道 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、內側微光和向外發散的柔影，背景柔化而前景清楚。
淡暗輪廓交代邊界，發散柔影交代距離。內緣光只留在這種有材質作用的局部。

我會用它真正跨過的背景檢查：全白底可能只剩輪廓，底下太繁雜又可能干擾文字。這組示意只呈現透光與柔化，不模擬真正的折射。

回到實際介面，我會依序看輪廓能否辨認、陰影是否交代距離，以及材質有沒有妨礙內容。這個順序讓細化有明確對象；半像素與透明度都只是起點，不是每個背景都適用的答案。