这是一款用纯 CSS 实现的文字贴纸集合：八张彩色贴纸（hello、blueming、palette、LILAC、love wins all、eight、good day、Friday）随机散落在画面中心，每张都有厚厚的白色描边、外层薄一圈的高亮描边和斜向 40° 的渐变光泽，鼠标悬停会略微放大并让填色变透明只留描边。整段没有 JavaScript、没有图片素材、没有 SVG——所有效果都靠 `-webkit-text-stroke`、`paint-order`、`filter: drop-shadow`、`background-clip: text` 这几个属性叠加实现。字体使用 Google Fonts 的 Cherry Bomb One，糖果感十足。
这款文字贴纸的四个亮点
厚描边+细外描一次成型：`-webkit-text-stroke: 50px #fff` 画厚白边、`filter: drop-shadow(1px 0 var(--outline-color))` 系列四方向偏移各画一次形成薄的外描色边，两层错落感强。
渐变光泽用 `::before` 伪元素叠加：伪元素同一段文字，但用 `linear-gradient(40deg, ...)` + `background-clip: text` 让填色变成金属光泽而不是单色。
`paint-order: stroke fill` 是关键，让描边渲染在填色之下，避免厚描边把字压小；此属性支持度全主流浏览器均已到位。
八张贴纸的定位靠 `translate` + `rotate` 各自散布，每张有独立主色变量 `--text-color`，改一个变量整张贴纸变色，扩展方便。
贴纸效果的三个 CSS 技术要点
其一，`-webkit-text-stroke` 是「文字外边框」，宽度决定边厚度但会挤压字面积——所以本模板给它加了 `paint-order: stroke fill`，先描后填，字形保持完整。其二，`::before` 用 `content: attr(data-text)` 复制同一段文字实现「光泽副本」，而不是复制 DOM，语义与可访问性不受影响。其三，多层 drop-shadow 是描外描的经典技巧——四个方向各一次单像素偏移，本质上是外描边的近似解，比 SVG filter 或 canvas 便宜得多。源码中均有注释。
换成自己的文字与配色
要换文字，直接改 `
` 的 innerText 和 `data-text` 属性（两处要同步）。要加/删贴纸，复制一个 div、给一个新 class（比如 `.sticker.custom`），在 CSS 里为该 class 写 `--text-color`、`--text-size`、`translate`、`rotate`。要换整体色调，改各 `.sticker.xxx { --text-color: #xxx }`。中文场景下把 `font-family` 从 Cherry Bomb One 换成更适合中文的字体或加中文回退 "PingFang SC", "Microsoft YaHei"——因为 Cherry Bomb One 只覆盖拉丁字符。
浏览器兼容性：`-webkit-text-stroke` 需 WebKit 内核（Chrome/Safari/Edge 均支持），Firefox 需要 `text-stroke` 前缀支持已到位；`background-clip: text` 主流浏览器均已支持。详细运行方法请参见压缩包内的帮助文档。
常见问题
为什么描边太厚字被压得看不清
把 `--stroke-width` 从 `calc(var(--text-size) * 0.5)` 减小到 0.25 或 0.2，或者字号加大——`paint-order: stroke fill` 已经尽力保护了字形，但描边过厚仍然会挤压。
中文能不能用这个特效
能，但要换字体。Cherry Bomb One 只覆盖拉丁字符，中文会 fallback；建议换成 Noto Sans SC 或 Alimama ShuHeiTi 之类的粗黑体，再补中文回退。
贴纸能不能拖动
模板本身是静态定位。要拖动，写一段 JS 监听 mousedown/mousemove/mouseup 或用 interact.js，把每张的 translate 改为鼠标位置即可。
能不能做成生成器让用户输入文字自动贴
能。输入框绑定到 `data-text` 与 innerText，颜色/角度/位置从 UI 面板控制变量，是很好的小工具项目起点。
适合放在哪些页面
适合个人博客首页、活动主题页、节日特设页、社交平台 Banner、儿童/教育类站点的装饰位、周边商品/贴纸展示页。下载源码后可作为装饰模块嵌入任何 HTML 页面。
