模板:Gradient Stroke Text

出自Reko Wiki
於 2023年8月11日 (五) 09:39 由 Hakaze留言 | 貢獻 所做的修訂 (建立內容為「<includeonly><div style="display: inline-block; background:-webkit-linear-gradient({{{2}}}, {{{3}}});-webkit-background-clip: text;-webkit-text-stroke-color: transparent; -webkit-text-stroke-width:{{{4|1}}}px; color:{{1}}">{{{5}}}</div></includeonly><noinclude> <!-- Add categories to the /doc subpage; interwikis go to Wikidata. --> {{Documentation}} </noinclude>」的新頁面)
(差異) ←上個修訂 | 最新修訂 (差異) | 下個修訂→ (差異)
跳至導覽 跳至搜尋
以下為模板的說明文件([編輯]、[更新])
請注意:此模板在某些情況下可能會部份或全體不可見。
檢視模板:Gradient_Stroke_Text/doc編輯文件內容。(如何使用?)
為新模板建立說明文件時,會直接套用範本基底。

描述

  • 漸變外框文字,建議用黑體粗體文字,不然效果不會太好。
  • 衍生自模板:Gradient Text,透過CSS的-webkit-text-stroke-color達成外框漸變文字的效果
  • 要注意此模板可能無法搭配其他格式模板使用

語法

{{Gradient Text|方向|顏色|文字}}

欄位 必要性 作用 備註
匿名參數1 (文字顏色) 必要 文字的顏色
匿名參數2 (方向) 必要 漸變的方向,例如:0deg
匿名參數3 (漸變顏色) 必要 文字外框漸變的顏色,用「,」隔開,可用hex, rgba()等語法
匿名參數4 (外框寬度) 必要 外框的寬度
匿名參數5 (文字) 必要 要漸變的文字
style 選擇 自定義樣式

範例

  • 基本使用
{{Gradient Stroke Text|white|0deg|red,orange,blue,green,purple|3|'''測試漸變外框文字'''}}
測試漸變外框文字
  • 雙色外框
{{Gradient Stroke Text|white|90deg|red 0%, red 50%,green 51%,green 100%|3|'''測試雙色外框文字'''}}
測試雙色外框文字
  • 跟其他特效疊加製作效果
{{Layer_Arrange
| {{Glow Text|black|'''測試文字'''|scale=1}}
| {{Gradient Stroke Text|white|0deg|red,orange,blue,green,purple|5|'''測試文字'''}}
}}
測試文字
測試文字