html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

text-shadow是css文本装饰属性，语法为text-shadow: offset-x offset-y blur-radius color，四值可省略后两项，默认为0和透明色；须带单位（如px），多层阴影用逗号分隔，现代浏览器均支持但ie9+才兼容。

text-shadow 属性的基本写法

文字阴影用 text-shadow 实现，它不是独立元素，而是 CSS 文本装饰属性，必须作用在有文字内容的标签上（比如 <p></p>、<h1></h1>、<span></span>）。

语法格式是：text-shadow: <offset-x><offset-y><blur-radius><color></color></blur-radius></offset-y></offset-x>，四个值缺一不可（但后两个可省略为 0 和透明色）。

常见误写：漏掉单位（如写 2 2 4 black 而不是 2px 2px 4px black），浏览器会直接忽略整条声明。

单层阴影 vs 多层阴影的写法差异

单层阴影写一个四元组就行；多层阴影只需用逗号分隔多个四元组，顺序是从近到远叠加（前面的阴影会盖住后面的）。

text-shadow: 
  1px 1px 2px rgba(0,0,0,0.3),
  -1px -1px 1px rgba(255,255,255,0.5);

• 第一层是右下浅黑模糊影，增强立体感
• 第二层是左上亮白细影，模拟高光
• 注意：多层时每个四元组都必须带单位，不能混用 px 和无单位数值
• 超过 3–4 层容易让文字边缘发虚，尤其小字号下更明显

兼容性与移动端注意事项

text-shadow 在所有现代浏览器中都支持，包括 iOS Safari 和 Android Chrome，但 IE9+ 才开始支持（IE8 及以下完全无效）。

真机调试时容易踩的坑：

• 部分安卓低版本 WebView（如 Android 4.3 系统自带浏览器）对 rgba() 颜色支持不稳定，建议降级用 hsla() 或十六进制色
• 在 Retina 屏上，1px 偏移可能看起来太细，可尝试 0.5px（但需确认浏览器是否支持亚像素渲染）
• 避免对大段正文使用强阴影（如 text-shadow: 0 0 10px #ff0000），会显著拖慢重绘性能

和 box-shadow 混用时的视觉干扰

如果同一个元素同时设了 text-shadow 和 box-shadow（比如按钮），阴影会叠加渲染，可能导致边缘浑浊或颜色失真。

实操建议：

• 优先用 text-shadow 处理文字层次，用 box-shadow 控制容器浮起感，两者偏移方向尽量一致（如都向右下）
• 若文字背景是渐变或图片，强阴影可能被吞掉——此时应增大 blur-radius 或改用深色描边（-webkit-text-stroke）替代
• 不要指望 text-shadow 实现“内阴影”，它天生是外置投影；需要内凹效果得换思路（比如伪元素遮罩）

实际项目里最容易被忽略的是阴影层级和字体渲染的交互：同一套 text-shadow 在 macOS 的 subpixel antialiasing 和 Windows 的 ClearType 下表现差异很大，上线前务必在目标系统截图比对。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！