「模板:Gradient Stroke Text」:修訂間差異

出自Reko Wiki
跳至導覽 跳至搜尋
Hakaze留言 | 貢獻
無編輯摘要
Hakaze留言 | 貢獻
無編輯摘要
第1行: 第1行:
<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}}}; {{{style|}}}">{{{5}}}</div></includeonly><noinclude>
<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; padding-right:{{{4|1}}}px; padding-left:{{{4|1}}}px; color:{{{1}}}; {{{style|}}}">{{{5}}}</div></includeonly><noinclude>
<!-- Add categories to the /doc subpage; interwikis go to Wikidata. -->
<!-- Add categories to the /doc subpage; interwikis go to Wikidata. -->
{{Documentation}}
{{Documentation}}
</noinclude>
</noinclude>

於 2023年8月11日 (五) 14:32 的修訂

以下為模板的說明文件([編輯]、[更新])
請注意:此模板在某些情況下可能會部份或全體不可見。
檢視模板: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|'''測試文字'''}}
}}
測試文字
測試文字