半透明白底 + 背景模糊 + 1px 白描边,卡片像一块真正的磨砂玻璃浮在彩色背景上。
卡片
Card
浅灰底上用"一明一暗"两道阴影把元素雕出来,像从同一块材料上压制而成的浮雕。
卡片外圈是一道 1.5-2px 的渐变细线,内部纯白——只描一圈边就足够特别。
鼠标在哪,一圈柔光就跟到哪,边框在光斑附近微微亮起。Linear 风格的招牌交互。
卡片默认带一点透视倾斜,悬停时回正;内部元素用 translateZ 分层,立体感立刻出来。
默认只露一张图和标题,悬停时整卡上滑、描述文字从底部浮现。
一个大号数字是绝对主角,配标签、涨跌徽章和一条迷你趋势线。
三档定价里中间那档用深色底 + 渐变描边 + "最受欢迎"徽章,视觉重量碾压另外两档。
五星 + 一句原话 + 头像签名。评价内容要具体到场景,不要笼统的"很好用"。
封面图 + 分类日期 + 标题 + 摘要。信息层级清晰,是内容站列表页的基本单元。
居中圆形头像 + 姓名 + 职位 + 一排社交小图标。关于我们页的标准件。
图 + 角标 + 标题 + 价格 + 加购按钮,电商列表页的心脏,转化全靠它。
一道 conic-gradient 光带沿着卡片边框匀速旋转,像有一圈光在流动。
卡片顶部骑缝贴一枚旋转了几度的彩色胶囊徽章,像手账里贴的贴纸,瞬间有了亲和力。