示例

交互式幻灯片示例，展示 html2pptx-pro 的功能。每个部分展示一个幻灯片预览——点击 生成 PPTX 下载它，或使用下方按钮一次生成所有幻灯片。

1. Hero — 渐变背景

使用 Flexbox 居中的线性渐变。

欢迎使用 html2pptx-pro

轻松将 HTML 转换为 PowerPoint

渐变、Flexbox 居中和现代样式——全部保留在你的幻灯片中。

2. 排版

深色背景，多种字号、字重和颜色。

粗体标题文本

柔和色彩的副标题

高亮重要文本

常规段落文本，使用普通样式。这展示了不同的文本颜色、大小和字重在 PowerPoint 输出中的渲染效果。

3. 特性列

带圆角的 Flexbox 列布局。

功能对比

功能 A

将 HTML 元素高保真渲染为 PPTX 幻灯片

功能 B

完整的 CSS 层叠上下文支持，7 层绘制顺序

功能 C

简单 API——传入元素，获得 PowerPoint 文件

4. 服务卡片

带边框的卡片布局。

我们的服务

🚀

高性能

针对速度和效率进行了优化。

🎨

精美设计

高保真的 HTML 到 PPTX 输出。

⚡

易于集成

为你现有代码提供简单的 API。

5. 统计仪表盘

纵向渐变配合大号数字。

精彩数据

我们的平台带来卓越成果

99%

满意度

50K+

活跃用户

24/7

全天候支持

100+

覆盖国家

6. 文本装饰

粗体、斜体、下划线和删除线样式。

文本样式示例

使用 font-weight 的粗体文本

使用 font-style 的斜体文本

使用 text-decoration 的下划线文本

删除线文本

粗体、斜体和下划线组合

混合格式：粗体红色、斜体绿色和下划线紫色在同一段落中。

7. 列表

无序列表和有序列表。

列表示例

无序列表

带项目符号的第一项
列表中的第二项
这里是第三项
第四项也是最后一项

有序列表

步骤一：初始化
步骤二：配置
步骤三：执行
步骤四：验证

8. 数据表格

带交替行背景的表格。

季度报告

产品	Q1 营收	Q2 营收	增长率
企业套件	$1,200,000	$1,450,000	+20.8%
云服务	$890,000	$1,100,000	+23.6%
支持服务	$450,000	$520,000	+15.5%
培训项目	$180,000	$210,000	+16.7%

9. 边框样式

实线、虚线、点线、双线和混合边框。

边框变化

实线边框

虚线边框

点线边框

双线边框

圆角边框

混合边框

10. 嵌套元素

带 rgba 透明度的嵌套容器。

深层嵌套测试

容器层

第 1 层 - 蓝色

第 2 层 - 绿色

第 3 层 - 黄色（最深层）

徽章 1徽章 2徽章 3

11. 图片与 Object-Fit

固定尺寸容器中不同 `object-fit` 值的图片。

图片 Object-Fit

contain

cover

fill

scale-down

12. 透明度

CSS `opacity` 属性和 `rgba()` 背景色，以及重叠元素。

Opacity 与 RGBA

1.0

0.8

0.6

0.4

0.2

rgba(1.0)

rgba(0.8)

rgba(0.6)

rgba(0.4)

rgba(0.2)

蓝色 0.7

绿色 0.7

紫色 0.7

橙色 0.7

粉色 0.7

13. 字体与排版

字体家族、字号比例、字重和行高。

排版展示

字体家族

Times New RomanArialCourier NewGeorgiaVerdanaTahomaImpact

字号比例

10px14px18px24px32px42px

字重

常规 (400)半粗 (600)粗体 (700)极粗 (900)

行高

行高: 1.0 — 文本行紧密排列在一起。

行高: 1.5 — 正文适合阅读的舒适间距。

行高: 2.0 — 双倍行距，有充裕的垂直空间。

14. 渐变变化

多方向渐变、多色阶渐变和渐变文字。

渐变画廊

to right

to bottom

45deg

3 色阶 (90deg)

3 色阶 (180deg)

4 色阶 (270deg)

硬边界

百分比位置

对角 3 色阶

渐变文字效果

15. 高级定位

相对容器内的绝对定位，以及卡片上的徽章覆盖。

CSS 定位

绝对定位在相对容器内：

左上

右上

居中

左下

右下

卡片上的徽章覆盖：

新品

产品卡片

一个带有绝对定位徽章覆盖在右上角的卡片。

16. 高级列表样式

各种 list-style-type 值、嵌套列表和间隔项。

列表样式变化

无序样式

实心圆样式项 1
实心圆样式项 2

空心圆样式项 1
空心圆样式项 2

方块样式项 1
方块样式项 2

有序样式

十进制项一
十进制项二
十进制项三

前导零项
前导零项
前导零项

嵌套与间隔

顶层项
- 嵌套第 2 层
  - 嵌套第 3 层
另一个顶层项

间隔项 A
间隔项 B
间隔项 C

17. 文本对齐

显式 `text-align` 左对齐、居中和右对齐对比。

文本对齐

左对齐

此文本在容器中左对齐。

第二行也是左对齐。

居中对齐

此文本在容器中居中显示。

第二行也是居中。

右对齐

此文本在容器中右对齐。

第二行也是右对齐。

左对齐：价格列表

居中：总金额

右对齐：¥8,523.45

18. CJK 列表

CJK（中日韩）列表编号样式。

CJK 列表样式

cjk-ideographic

第一项
第二项
第三项

trad-chinese-informal

第一項
第二項
第三項

japanese-formal

第一項
第二項
第三項

korean-hangul-formal

첫 번째
두 번째
세 번째

19. 圆角渐变

带有各种 border-radius 值的线性渐变。

圆角渐变

rounded-none

rounded-lg

rounded-2xl

rounded-3xl

rounded-full

纵向
渐变

横向
渐变

对角
渐变

反向
对角

20. 渐变透明度

使用 rgba() 和 transparent 关键字的半透明渐变。

渐变透明度

rgba → 透明

rgba 到 rgba

透明 → 实色

半透明

粉色 → 橙色

淡入/淡出

21. 可见性

`visibility: hidden` 和 `display: none` 的对比。

Visibility 与 Display

正常（可见）

visibility: hidden

保留空间

display: none

移除空间

22. 裁剪文本

使用 `background-clip: text` 实现渐变文字效果。

Background Clip Text

渐变文字

多色渐变

彩虹效果

23. URL 图片

通过 `data-file` 属性从 URL 加载的图片。

基于 URL 的图片

图标 (SVG)

图表 (SVG)

图片通过 `withBase()` 加载，以在 VitePress 中正确解析路径。

24. 旋转变换

使用 CSS transform rotate 的元素。

旋转变换

无旋转

rotate(12deg)

rotate(45deg)

rotate(-12deg)

rotate(-45deg)

90°

180°

-90°

25. 盒阴影

各种 box-shadow 效果。

盒阴影

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

蓝色发光

红色发光

绿色发光

26. 裁剪路径

使用各种 CSS clip-path 形状裁剪的元素。

裁剪路径

圆形

椭圆

三角形

六边形

星形

内嵌

27. Canvas 元素

HTML `<canvas>` 元素，使用 2D 绑制的柱状图。

Canvas 绘图

图表图例

一月

二月

三月

四月

五月

六月

Canvas 内容在 PPTX 输出中被光栅化为图片。

28. 表单元素

原生 HTML 表单元素——文本输入框、文本域、下拉选择、复选框、单选按钮和按钮。

表单元素

文本输入

用户名

邮箱

密码

留言

按钮与占位符

搜索（占位符）

禁用输入

29. 多页幻灯片演示

从元素数组创建多页幻灯片演示文稿——每个元素成为一张独立的幻灯片。

幻灯片 1

带渐变背景的介绍页

幻灯片 2：内容

要点 A

演示文稿的第一个关键要点。

要点 B

第二个关键要点及支撑细节。

谢谢

深色主题的结束页

示例 ​

1. Hero — 渐变背景 ​