一张卡片的高级感，往往就差在顶部那道渐变线上。这段纯 CSS 卡片代码不用一行 JavaScript：用 ::before 伪元素在卡片顶部铺一条玫红渐变条，再用 @keyframes 让它缓慢上下漂浮。右边窗口是真实渲染效果，完整源码在文末可直接复制。
01 顶部渐变条是怎么画出来的
一个伪元素，一条渐变线
顶部那道渐变条不是额外的 div，而是 .bw3_0:before 伪元素：left:0; right:0; height:5px 让它贴着卡片顶部铺满整宽，再用 linear-gradient(90deg,...) 从左到右上色。卡片本身设了 overflow:hidden，渐变条两端会被圆角自然裁掉。
height:5px决定条有多粗，想秀气改 3px，想醒目改 8pxpadding:30px 22px 22px顶部多留 8px 是给渐变条让位border-radius:14px配overflow:hidden才能裁出圆角
配色统一用 hsl() 写法，只改第一个色相值就能整体换色，比手调三组十六进制省事得多。
顶部渐变条卡片
顶部一道渐变装饰线，简洁有力。
卡片正在缓慢上下漂浮
02 漂浮动效：留着还是关掉
只改三个地方，气质完全不同
左边这张是同一份代码改过三个值的结果，可以对照着看：
- 换色相：hsl 第一个值从
315玫红改成232蓝，边框和描述文字同步改，整套配色跟着走 - 关漂浮：删掉最后那行
animation，卡片立刻静止 - 加阴影：
box-shadow:none换成0 10px 26px rgba(31,45,90,.14)，卡片就有悬浮感
左图还把漂浮换成了 :hover 位移，鼠标移上去才动 4px。这种静态加悬停反馈更适合正文里的信息卡，不会一直抢视线。
换个色相就是新卡片
蓝青渐变，静止，带阴影。
鼠标移上去才有位移反馈
03 可调参数
想改尺寸、配色、动效，对着这张表改就行。整段是纯 HTML 加 CSS，没有 JavaScript 依赖。
| 参数 | 默认值 | 作用说明 |
|---|---|---|
| height:5px | 5px | 顶部渐变条粗细，3px 更秀气、8px 更醒目 |
| hsl(315 74% 52%) | 玫红 | 渐变左端色，改第一个值换色相：232 蓝、160 绿、45 橙 |
| hsl(357 80% 58%) | 珊瑚红 | 渐变右端色，左深右浅更有方向感 |
| 90deg | 横向 | 渐变方向，改成 135deg 变斜向 |
| border-radius:14px | 14px | 卡片圆角，配合 overflow:hidden 裁切渐变条 |
| padding:30px 22px 22px | 30/22/22 | 顶部多留 8px 给渐变条，别改成四边相等 |
| animation 3.2s | 3.2s | 漂浮一圈的时长，改大更慢更舒缓 |
| translateY(-6px) | 6px | 漂浮幅度，改小到 3px 几乎察觉不到 |
| box-shadow:none | 无阴影 | 加了阴影立体感更强，纯平风格可保持 none |
三个 hsl 色的第一个数字（315）是同一套色相，要换色就三个一起换，只改渐变不改边框，卡片边缘会出现怪异的杂色。
04 常见问题
顶部渐变条不显示，怎么回事？
九成是漏了
content:""，伪元素没有 content 就不会渲染。其次检查父卡片是否设了 overflow:hidden，没有的话渐变条会溢出圆角形成直角。怎么让它别一直动？
删掉最后一行
.bw3_0{animation:...} 即可完全静止。想保留一点交互感，就删掉 animation，改成 .bw3_0:hover{transform:translateY(-4px)}，鼠标移上去才动。为什么顶部内边距比左右大？
padding:30px 22px 22px 是刻意的，顶部多出 8px 是为了让文字不被渐变条压住。如果把渐变条改粗到 8px，顶部 padding 建议同步加到 34px 左右。一张页面能放多个吗？会和主题冲突吗？
类名是
.bw3_0 这种带随机后缀的写法，和主流主题撞名概率极低，同页放多个也没问题。想放第二种配色，复制一份把 bw3_0 全部替换成 bw3_1 再改颜色即可。深色主题能用吗？
改三处：
background 换成 #1b212a，文字 color 换成 #e6edf3，边框 hsl(315 52% 91%) 调深为 hsl(315 20% 32%)。渐变条本身是亮色，深色背景下反而更抓眼，可以保留。粘贴进去没效果怎么办？
确认用的是「自定义 HTML」区块而不是可视化编辑器的普通段落，后者会过滤
<style> 标签。想让全站侧边栏都能用，放进自定义 HTML 小工具即可。05 完整代码
复制下面整段，粘进「自定义 HTML」区块或小工具即可，WordPress 站点无需装插件，也不用引入任何外部库。
<style>
.bw3_0{box-sizing:border-box;width:100%;position:relative;border-radius:14px;padding:30px 22px 22px;color:#1c2434;font-size:17px;background:#ffffff;border:1px solid hsl(315 52% 91%);box-shadow:none;overflow:hidden;transition:all .3s ease}
.bw3_0:before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:linear-gradient(90deg,hsl(315 74% 52%),hsl(357 80% 58%))}
.bw3_0-t{font-weight:700;margin:0 0 6px}
.bw3_0-d{margin:0;color:hsl(315 12% 45%);font-size:15px;line-height:1.7}
@keyframes bw3_0-mo{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bw3_0{animation:bw3_0-mo 3.2s ease-in-out infinite}
</style>
<div class="bw3_0"><p class="bw3_0-t">顶部渐变条卡片</p><p class="bw3_0-d">顶部一道渐变装饰线，简洁有力。</p></div>务必用「自定义 HTML」区块粘贴，可视化编辑器会过滤掉
<style> 标签导致样式全丢。想全站可用就放进「外观 → 小工具 → 自定义 HTML」。06 小结
这张卡片的技术点就两个——::before 画渐变条，@keyframes 做漂浮。想换风格，动色相值、删 animation、加 box-shadow 这三处就够了。有更好看的配色欢迎评论区贴出来交流。
原创文章，如若转载，请注明出处：维形筑网https://wxzcw.com/64-2/