diff --git a/test-styles.html b/test-styles.html new file mode 100644 index 0000000..3570ebe --- /dev/null +++ b/test-styles.html @@ -0,0 +1,140 @@ + + + + + +样式测试页 + + + + +

样式映射测试页

+

用于验证 html2pptx 的样式转化能力

+ +

一、四圆角

+
+
+
统一圆角 12px
+
border-radius: 12px
+
+
+
对角圆角
+
border-radius: 0 20px 0 20px
+
+
+
交替圆角
+
border-radius: 50px 10px 50px 10px
+
+
+
正圆 50%
+
圆形
+
+
+ +

二、旋转

+
+
+
rotate(5deg)
+
轻微右倾
+
+
+
rotate(-8deg)
+
左倾
+
+
+
rotate(15deg)
+
明显右倾
+
+
+ +

三、圆角 + 旋转组合

+
+
+
圆角 + 轻微旋转
+
border-radius: 15px + rotate(3deg)
+
+
+
底圆角 + 左倾
+
底部圆角 + rotate(-2deg)
+
+
+ +

四、透明度

+
+
+
opacity: 0.7
+
70% 不透明
+
+
+
opacity: 0.4
+
40% 不透明
+
+
+ +

五、字间距

+
+
letter-spacing: 3px
+

这是加宽字间距的文字，每个字之间有明显间隔

+
letter-spacing: -0.5px
+

这是收紧字间距的文字，字符排列更紧密

+
+ +

六、行高

+
+
line-height: 1.2（紧凑）
+

这是紧凑行高的段落。文字之间的垂直距离很小，适合标题或短文本展示。行高1.2意味着行间距是字号的1.2倍。

+
line-height: 2.0（宽松）
+

这是宽松行高的段落。文字之间的垂直距离很大，适合长文本阅读。行高2.0意味着行间距是字号的2倍。

+
+ +

七、文字装饰

+
+

这段文字有下划线（text-decoration: underline）

+

这段文字有删除线（text-decoration: line-through）

+
+ + +