TYPOGRAPHY
荧光笔标记Marker Highlight
文字下半截垫一条荧光色，像用记号笔划过的重点。
效果预览
关键不是写得更快，而是想清楚再写。
本周的重点是把转化率翻倍，其他都靠后。
这个结论来自 12,000 次实验，不是拍脑袋。
动画版：高亮自己划上来 →
适合用在哪
正文重点、落地页承诺词、课程讲义、博客金句。
容易踩的坑
- 浅黄荧光底在暗色模式下没有替换，深底上变成刺眼色块且文字对比度不足。
- 标记跨行时 background 在断行处被截断，需加 box-decoration-break:clone。
- 只用颜色标记重点而没用 mark 或 strong 语义，读屏用户感知不到强调。
设计提示词 · Prompt
荧光笔标记（Marker Highlight）：background:linear-gradient(180deg, transparent 55-60%, 荧光色 55-60%)——只染下半截，露出字的完整轮廓。荧光色用低饱和的（#FEF08A 柠檬黄、#BFDBFE 雾蓝、#BBF7D0 薄荷绿），饱和纯黄会晃眼。进阶：动画版让高亮从 0% 宽度"划"到 100%（background-size 0→100%，进入视口触发 600ms）。多色标记时全页统一荧光色系（同明度不同色相）。配 600 字重，标记部分自动成为视觉焦点。
Marker Highlight: background:linear-gradient(180deg, transparent 55-60%, highlighter color 55-60%) — tinting only the lower half so the full outline of the letters remains visible. Use low-saturation highlighter colors (#FEF08A lemon yellow, #BFDBFE misty blue, #BBF7D0 mint green); saturated pure yellow is glaring. Advanced: an animated version where the highlight "swipes" from 0% to 100% width (background-size 0→100%, triggered on entering the viewport, 600ms). With multiple marker colors, keep a consistent highlighter palette across the page (same lightness, different hues). Pair with weight 600 so the marked part becomes the visual focus automatically.
常见搭配
同一页面里经常和「荧光笔标记」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-markerdemo"> <span>关键不是写得更快，而是<span class="d-marker">想清楚再写</span>。</span> <span>本周的重点是<span class="d-marker--b">把转化率翻倍</span>，其他都靠后。</span> <span>这个结论<span class="d-marker--g">来自 12,000 次实验</span>，不是拍脑袋。</span> <span>动画版：<span class="d-marker--anim">高亮自己划上来 →</span></span> </div>