纯CSS贴纸效果需用position: absolute脱离文档流，配合transform: rotate(±2°~5°)和三层box-shadow（内阴影+主投影+翘角长影）实现真实感，再以inline-flex居中、不对称圆角及无衬线小字体强化细节。
直接用 position + transform + box-shadow 就能做出真实感强的贴纸效果，不需要 JS、不依赖第三方库，纯 CSS 可控且轻量。
贴纸标签的定位必须用 position: absolute
贴纸要“歪着贴”“偏一点”“浮在右上角”，就得脱离文档流。用 relative 包裹容器，再对子元素设 absolute，才能精准控制偏移：
- 父容器加
position: relative（否则absolute会往上找最近的定位祖先，可能错位） - 贴纸元素设
position: absolute，再用top/right定位，比如top: -8px; right: -8px - 避免用
margin模拟偏移——它仍占文档流空间，容易挤坏布局
transform: rotate() 是贴纸倾斜的关键
真实贴纸不会端端正正，轻微旋转（±2°~5°）立刻有手贴感。注意不是所有场景都适合旋转：
- 只对
absolute元素用transform，否则可能触发重排或影响行内布局 - 旋转后若出现边缘锯齿，加
backface-visibility: hidden或translateZ(0)强制 GPU 加速 - 别用
skew()替代rotate()——它拉伸文字，视觉失真
立体阴影靠多层 box-shadow 叠加
单层阴影太平，贴纸没“翘边”感。三层阴影是实用下限：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 第一层：紧贴文字的浅灰内阴影
inset 0 1px 1px rgba(0,0,0,.1) - 第二层：主外阴影模拟底部投影
0 2px 4px rgba(0,0,0,.2) - 第三层：偏右下长阴影强化“翘起角”
2px 4px 8px rgba(0,0,0,.15) - 别滥用
spread值——超过2px容易显得像描边而非阴影
文字居中和圆角必须匹配贴纸气质
贴纸标签通常短文本（如 New、Hot），细节决定是否“像”：
- 用
display: inline-flex+align-items: center+justify-content: center居中，比line-height更稳（尤其多行时） - 圆角推荐
border-radius: 4px 24px 24px 4px（左小右大），模拟手撕胶带的自然弧度 - 字体选无衬线体，字号别超
12px，否则在小标签里糊成一团 - 慎用
text-transform: uppercase——全大写在窄标签里太压迫，首字母大写更友好
最容易被忽略的是 z-index 层级和 pointer-events。贴纸常覆盖在按钮或图片上，若没设 z-index: 1，可能被遮；若贴纸本身需点击（如筛选 tag），记得保留 pointer-events: auto，别被父层 pointer-events: none 误伤。
