深紫夜色背景上立着一张磨砂玻璃卡片，卡面上横跨一条紫粉渐变的缎带，缎带中央是一行沿弧线排布的镂空文字，两端各垂下一截燕尾形的带尾。鼠标移上卡片，整张卡会轻轻上浮并向后仰一点。技术上是纯 CSS 加内联 SVG：卡片的玻璃质感用 backdrop-filter，缎带正面是一段 SVG 路径，文字用 textPath 贴着曲线走，刺绣般的凸起则由 SVG 滤镜生成，没有一行 JavaScript，也没有用到图片。

缎带是怎么穿过卡片的

靠 Z 轴分层。容器开了 preserve-3d，带尾 translateZ 为负数落到卡片后面，缎带正面为正数浮到卡片前面，于是同一条带子看起来是从卡片背后绕出来的，而不是贴在表面。
绸面的光泽是一条多段渐变。从暗到亮再到暗排了七个色标，模拟布料受光的高光带；上面再叠一层斜向条纹图案，用 overlay 混合模式做出丝绸的细密纹理。
文字是「挖」出来的。同一段文字画了两遍，一遍作为亮度遮罩把缎带挖成字形，一遍套滤镜做出凸起的线迹，叠起来才有绣上去的厚度。

刺绣质感的滤镜是怎么搭的

SVG 滤镜里串了四步：先用 feMorphology 把字形轮廓稍微加粗，再 feGaussianBlur 把边缘化开，接着 feSpecularLighting 配一盏点光源打出高光，最后和原图合并。其中定位光源的这一行决定了高光落在哪：

<fePointLight x="220" y="20" z="40" />

x 放在缎带横向中点，y 靠上，z 是光源离画面的距离——数值越小光越近、高光越集中。想让反光偏左或偏右，改 x 即可，不用动其他滤镜节点。

能改的地方

缎带和卡片的颜色都收在 :root 的 oklch 变量里，改色相就能整体换成金色、墨绿或酒红。缎带的弧度由 SVG 里那条二次贝塞尔路径控制，文字的弧线是另一条同形状的路径，两者要一起改才不会错位。卡片圆角、模糊强度在 .card 上，燕尾的 V 形缺口在 .ribbon-tail 的 clip-path 里。

常见问题

卡片看起来不透明，没有磨砂效果？

磨砂靠 backdrop-filter 实现，需要较新版本的 Chrome、Edge、Safari 或 Firefox；旧版本会显示为半透明色块，结构不受影响。另外卡片颜色用的是 oklch 色彩空间，同样需要近两年的浏览器。

缎带上的字能换成中文吗？

能，文字在 HTML 里出现两处（遮罩内一处、可见文字一处），必须同时改成一样的内容，否则挖空和高光会对不上。中文字宽比英文大，替换后建议把字号或字距调小一点。

可以放多张卡片吗？

可以，但 SVG 里的渐变、图案、遮罩、滤镜都是按 id 引用的，复制多份时要给每份换成不同的 id，否则后面的会覆盖前面的定义。

适合用在哪

会员权益卡、活动报名页的主视觉、礼品卡与兑换券、以及需要「开箱感」的产品介绍卡片。滤镜、遮罩与三维分层的完整写法都在源码里，下载后可查看。