12451
a3b14e9cb8
fix(landing): 产品图硬边框融进页面白底（径向遮罩）
## 问题
上一提交把产品图换成分栏布局后，图片是 4:3 矩形、自带浅灰蓝渐变背景，
贴在页面白底上出现一道**明显的竖直硬边** —— 柜子像被"贴"上去而不是融在页面里。
（用户看截图指出"这个过渡很突然"。）
## 修法
给 `.hero img` 加**径向渐变遮罩**，让中心（柜体）保持不透明、四缘渐变透明：
```css
-webkit-mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, #000 58%, transparent 92%);
mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, #000 58%, transparent 92%);
```
椭圆半径按**柜体在画面里的实际占比**取（约占宽 50%、高 84%），
因此柜体完全落在实心区内不受影响，只有图片自身的背景在边缘处化开。
同时**移除 CSS `drop-shadow`**：遮罩会把它一起切掉，导致影子被拦腰截断；
且这张图自带地面投影，CSS 投影本来也是多余的。
不改图片本身、不重新生成 —— 纯 CSS，随时可调。
## 实测
线上 HTML 已确认含两条 `mask-image`（含 `-webkit-` 前缀）且不再有 `drop-shadow`；
`hero.jpg` / `og-image.jpg` / `favicon.svg` / `logo.svg` 均 200 正常。
2026-09-21 02:37:22 +08:00
..
2026-09-21 02:37:22 +08:00
2026-09-20 04:31:42 +08:00
2026-09-20 01:21:17 +08:00
2026-09-20 04:31:42 +08:00
2026-09-19 23:41:09 +08:00
2026-09-19 23:41:09 +08:00
2026-09-20 02:44:51 +08:00
2026-09-20 02:44:51 +08:00
2026-09-20 01:21:17 +08:00
2026-09-20 02:44:51 +08:00
2026-09-20 02:44:51 +08:00