css-alpha-masking

name	css-alpha-masking
description	用 linear-gradient 应用 CSS alpha 遮罩，实现水平或垂直的边缘淡出（mask-image 和 -webkit-mask-image）。当被要求 alpha 遮罩、淡出边缘或 CSS 遮罩渐变时使用。

CSS Alpha Masking Skill

工作流程

1. 确认方向（水平或垂直）和淡出停止点百分比。
2. 提供内联 CSS 片段和任何所需的类用法。
3. 只提供小幅调整（方向、停止点位置、颜色）。

使用检查清单

• 直接在元素上或在 CSS 类中应用遮罩样式。
• 始终同时包含 mask-image 和 -webkit-mask-image 以兼容 Safari。
• 确保元素有可见内容；遮罩只显现/隐藏 alpha。

水平（左右）淡出

/* Add this inline CSS to any element */
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);

垂直（上下）淡出

/* Add this inline CSS to any element */
mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);

自定义旋钮

• 方向：to right、to left、to bottom、to top。
• 淡出深度：调整 15% 和 85% 停止点。
• 强度：把 transparent 改为 rgba(0,0,0,0.2) 以获得更柔和的淡出。

常见坑

• 忘记为 Safari 加上 -webkit-mask-image 回退。
• 期望遮罩在 overflow: hidden 但背后无可见内容的元素上生效。

规格缺失时应询问的问题

• 淡出应朝哪个方向？
• 淡出边缘应有多宽？
• 这是用于图片、文字，还是容器背景？