HTML中实现文字描边效果的text-stroke属性使用方法-html教程-PHP中文网

text-stroke 不是标准 CSS 属性，必须用 -webkit-text-stroke 且仅 WebKit 内核支持；需配合 color: transparent 才可见描边，否则被前景色覆盖；可用 text-shadow 八方向模拟描边，@supports 检测更可靠，Firefox 不支持该特性。

html中实现文字描边效果的text-stroke属性使用方法

text-stroke 不是标准 CSS 属性，单独写 text-stroke: 2px #000 在任何浏览器里都不会生效。必须用 -webkit-text-stroke，且它只在 WebKit 内核（Chrome、Safari、新版 Edge）中起作用。

为什么 -webkit-text-stroke 必须配 color: transparent？

描边本身不“遮盖”文字内容，而是叠加在文字轮廓上。如果 color 是实色（比如 color: black），描边会被前景色完全盖住，看起来就像没加描边。

正确写法：-webkit-text-stroke: 2px #ff6b6b; color: transparent;
错误写法：-webkit-text-stroke: 2px #ff6b6b; color: #333;（描边不可见）
若想保留文字填充色 + 描边双显，得用 text-shadow 模拟，或把描边色设得比填充色更粗/更高对比度（但效果不稳定）

text-shadow 模拟描边时，8 方向比 4 方向更可靠

只写上下左右 4 个方向的 text-shadow（如 1px 0 0 #000, -1px 0 0 #000...）在斜线笔画（如 “W”、“N”、“X”）连接处容易露白，形成断点。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

推荐写法（8 方向，无模糊）：text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000;
要模拟 2px 描边？把所有偏移量改成 ±2px，不能只调模糊值（blur-radius）——那会变虚边，不是描边
注意：text-shadow 的性能开销略高于 -webkit-text-stroke，尤其在动画中频繁重绘时

@supports 检测比 user-agent 判断更靠谱

别用 JavaScript 去判断浏览器是不是 Chrome/Safari，@supports 能直接检测引擎是否支持该特性：

.stroked {
  /* 降级：先给 text-shadow */
  text-shadow: -1px -1px 0 #000, 1px 1px 0 #000;
}
@supports (-webkit-text-stroke: 1px #000) {
  .stroked {
    -webkit-text-stroke: 1.5px #000;
    color: transparent;
    text-shadow: none;
  }
}

@supports 在 Firefox、Edge、Chrome 中都已稳定支持（2026 年无需前缀）
不要写 @supports (text-stroke: 1px #000) —— 这个属性根本不存在，检测永远失败
实际项目中，建议把 text-shadow 版本写在前面，再用 @supports 覆盖，避免旧版 Safari（如 iOS 15.2）因小数像素四舍五入导致描边消失

真正麻烦的不是怎么写，而是描边宽度小于 1px 时多数浏览器直接忽略；还有 Firefox 用户看到的是纯色字而非描边字——这些细节，上线前必须在真机上逐个验证，不能只信开发工具里的模拟结果。