wpf中触发器通过style.triggers定义,支持属性触发(如ismouseover、ispressed)来动态修改控件样式;需在style内用setter设置默认值,并在trigger中指定条件与对应setter,才能实现交互式样式切换。

直接用 text-stroke 不会生效,必须写 -webkit-text-stroke,且必须配 color: transparent,否则看到的只是加粗实心字,不是空心描边。
为什么写了 -webkit-text-stroke 却没看到描边
最常见原因是:只设了描边,没动填充色。浏览器默认用 color: black 渲染文字,描边画在轮廓上,立刻被前景色盖住——看起来像什么都没加。
-
-webkit-text-stroke: 1.5px #000单独存在 → 实际效果是“黑字变粗”,不是空心 - 漏掉
color: transparent→ 描边不可见;漏掉-webkit-text-stroke→ 文字彻底消失(透明填充 + 无描边 = 无像素) - 用
opacity: 0替代color: transparent→ 整个元素(含描边)都不可见 - 小数像素(如
1.5px)在旧版 Safari(iOS 15.2 及更早)会被四舍五入清零,描边直接消失,优先用整数如1px或2px
@supports 检测必须带 -webkit- 前缀
写 @supports (text-stroke: 1px #000) 永远失败,因为这个无前缀属性根本不存在,所有浏览器都会忽略整块规则。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确检测:
@supports (-webkit-text-stroke: 1px #000)—— Chrome/Safari/新版 Edge 返回 true,Firefox 直接跳过 - 别用 JavaScript 判断 UA,
@supports是能力检测,不阻塞渲染、更轻量、更可靠 - 推荐结构:先写
text-shadow版本兜底;再用@supports块覆盖,里面启用-webkit-text-stroke并设text-shadow: none
中文字体描边容易糊,怎么调才稳
中文字体笔画密度差异大,同一套描边参数在「思源黑体」上清晰,在「站酷小薇体」上可能糊成一团;小字号下尤其明显。
- 中文字体建议描边 ≤
1.5px,搭配font-weight: 700提升笔画锐度 - 避免用纯黑描边配深色背景(对比爆炸),改用
rgba(0,0,0,0.7)或微调为#111 - 描边宽度超过
2px就易发虚或锯齿,尤其在非 Retina 屏、缩放 ≠ 100%、小字号场景下 - 真要粗描边、渐变描边或响应式缩放(如用
vw字号),-webkit-text-stroke的px单位不会随缩放变化,此时 SVG 的<text stroke=""></text>才可控
空心描边看着简单,但真正落地时,color: transparent 和 @supports 写法是硬门槛,而中文字体+小字号+旧 Safari 这三者叠加,才是最容易翻车的组合点。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










