From a3b14e9cb8cfdf8ccfecfb004fcd6e99ca3cf055 Mon Sep 17 00:00:00 2001
From: 12451 <12451@example.com>
Date: Mon, 21 Sep 2026 02:37:22 +0800
Subject: [PATCH] =?UTF-8?q?fix(landing):=20=E4=BA=A7=E5=93=81=E5=9B=BE?=
 =?UTF-8?q?=E7=A1=AC=E8=BE=B9=E6=A1=86=E8=9E=8D=E8=BF=9B=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=99=BD=E5=BA=95=EF=BC=88=E5=BE=84=E5=90=91=E9=81=AE=E7=BD=A9?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 问题

上一提交把产品图换成分栏布局后，图片是 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 正常。
---
 deploy/landing/index.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/deploy/landing/index.html b/deploy/landing/index.html
index b078d47..df81273 100644
--- a/deploy/landing/index.html
+++ b/deploy/landing/index.html
@@ -202,7 +202,12 @@ h1 .accent { color: var(--brand); }
   max-width: 100%; max-height: 100%;
   width: auto; height: auto;
   object-fit: contain;
-  filter: drop-shadow(0 26px 44px rgba(15,20,25,0.13));
+  /* 把图片的硬边框**融进页面白底**：径向遮罩让中心（柜体）保持不透明、四缘渐变透明。
+     否则 4:3 的图贴在白底上会有一道明显的"贴图"竖直硬边。
+     椭圆半径按柜体在画面里的占比取（柜体约占宽 50%、高 84%）⇒ 柜体完全在实心区内，
+     只有背景在边缘化开。图片自带地面投影，故移除 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%);
 }
 
 /* ===== BOT: 底部备案 ===== */