模板:倾斜文本/doc

本模板用于实现倾斜文本，例如：很久的故事是多久

参数

{{倾斜文本|第一个词|第二个词|第三个词|......|第n个词
|style=通用样式|rotate=通用旋转角度|color=通用文本颜色
|stn=第n个词的css样式|ron=第n个词的旋转角度}}

本模板会将每个词分别置于inline-block内，通过transform属性进行旋转。

• style：适用于每个词的css样式。
• rotate：指定旋转的角度，角度为正顺时针旋转，可以使用deg（度）、rad（弧度）、turn（圈数）等单位。
• color：指定文本的颜色。
• st_n：为第n个词单独设置样式。
• ro_n：为第n个词单独设置旋转角度。
• 将某个匿名参数留空可创造一个断行

示例

示例1

{{倾斜文本|rotate=-5deg|第一个词|第二个词|第三个词|......|第n个词}}

第一个词第二个词第三个词......第n个词

示例2

{{倾斜文本|第一个词|第二个词|第三个词|......|第n个词
|style=color:red
|color=blue<!--优先级比style更高-->
|rotate=-5deg
|st2=color:#6cf<!--单独设置样式-->
|ro2=10deg<!--单独设置样式-->
}}

第一个词第二个词第三个词......第n个词

示例3

{{倾斜文本|rotate=-5deg|第一个词|第二个词|第三个词|<!--留空可创造断行-->|第n个词}}

第一个词第二个词第三个词
第n个词

在POEM标签内

如果这样书写模板：

<poem>
{{倾斜文本|第一个词|第二个词|第三个词|......|第n个词
|style=color:red
|color=blue
|rotate=-5deg
|st2=color:#6cf
|ro2=10deg
}}
</poem>

样式将不再生效：会输出：

第一个词第二个词第三个词......第n个词

需要不断行书写：

<poem>
{{倾斜文本|第一个词|第二个词|第三个词|......|第n个词|style=color:red|color=blue|rotate=-5deg|st2=color:#6cf|ro2=10deg}}
</poem>

外部链接

• CSS transform属性|MDN
• CSS变换函数|MDN