模板:傾斜文本

模板文檔  [查看] [] [歷史] [刷新]

本模板用於實現傾斜文本，例如：很久的故事是多久

參數

{{傾斜文本|第一個詞|第二個詞|第三個詞|......|第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>

需要不斷行書寫：

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

參見

• CSS transform屬性|MDN
• CSS變換函數|MDN