
定价卡片
数据展示 · 组件三档并排,用边框粗细与阴影把推荐档抬起来,价格用等宽数字(tabular-nums)对齐——不加这条,¥0 和 ¥399 的小数点会错位,三张卡的价签看起来像没对齐。billing 参数让月付与年付共用同一套 DOM:年付只换数字与角标,不另做一套卡片。
ReactHTML/CSS复制 0深色无障碍
流光按钮
其他 · 元素一次性扫过的高光,不是循环呼吸。按钮底色固定、只有高光色跟着参数走——这两件事分开,才不会出现「拖了半天整颗按钮变色、那道光纹丝不动」的假参数。扫动用 ::before 的位移实现,不额外挂 DOM 节点,也不干扰 :active 的按压反馈。
ReactHTML/CSS复制 0深色无障碍动效