Web、UI與CSS
卡片陰影模糊，如何調整模糊與擴展？
使用工具
想讓卡片微浮，結果四周灰霧；增加模糊雖柔和，卻削弱邊界。不要只用大小理解陰影，應區分位移、柔化、擴展、透明度。逐項調整可把 CSS 數字與外觀對應起來。
先用無模糊陰影讀位移
box-shadow: 4px 8px 0px 0px rgb(15 23 42 / 0.18);設 #0F172A、x=4、y=8、模糊與擴展=0、alpha=0.18、關閉 inset。影向右四、向下八像素，清楚輪廓便於檢查方向。負 x 向左、負 y 向上。
陰影不預留版面空間，鄰卡間距需 gap 或 margin。影擴大可視覺重疊但盒子未移動，應區分幾何位置與繪製範圍。
模糊與擴展不是同一控制
box-shadow: 0px 8px 24px 0px rgb(15 23 42 / 0.18);x 回零，只增模糊到 24，邊緣變柔。正擴展放大原形，負值縮小。把兩者都當增大陰影的同一手段，可能產生意外濃邊。
負模糊無效，但位移與擴展可負。不要為消錯直接去負號，應確認欄位。想內陰影可檢查獨立 inset 選項，而不是強行調位移。
用 alpha 調濃度並結合背景檢查
定形後比較 alpha 0.10、0.18、0.30；零透明、一不透明。同值在明暗背景不同。為暗色主題看得見而全域加濃，可能讓亮色主題過重。
色彩本身含 alpha 時也要查獨立 alpha 設定，輸出使用該值。保留設定可能解釋為何僅改色彩不改變預期透明度，應讀最終 rgb(... / 0.18)。
深色主題也需考慮陰影外的邊界
近黑面疊近黑影可能難辨，邊線、面明度或間距可更清楚。選取與可點擊狀態不能只靠影，需其他提示，並與鍵盤焦點區分。
父容器 overflow 裁切可能截斷陰影。增大前應查繪製區域。預覽有、實際無，不一定複製失敗，可能版面限制不同。
從單一預覽回到實際清單檢查
單卡輕影在十卡清單可能整體過重。應檢查實際數量、間距、文字與小螢幕捲動，優先閱讀與操作清楚，而非陰影存在感。
目前基本介面調整一層影。CSS 可逗號疊層，但介面無專門加層操作。先一層滿足需要，若使用處需多層，應定義驗證各層作用，不預設越多越好。