模板:Gradient Text/doc

出自H萌娘
跳至導覽 跳至搜尋
Information icon4.svg
實驗性功能,請勿濫用
本模板僅在版本較新的瀏覽器上有效。
Icon-info.png
實驗性功能,請勿濫用
本模板僅在版本較新的瀏覽器上有效。


簡介[編輯原始碼]

這是一個真·漸變顏色文字模板。使用CSS的background-clip:text屬性實現的真正意義上的漸變色文字。而不是原始的一個文字一個顏色模擬出的偽·漸變色效果。

由於目前的瀏覽器中,實現了background-clip:text屬性的只有Edge和Webkit內核(Chrome,Safari,Android自帶瀏覽器,國產雙核瀏覽器的極速內核)的瀏覽器可以解析並顯示出效果。IE、Firefox 49以下顯示效果則是還原為原始的黑色字(Firefox 48可以打開about:config,把layout.css.background-clip-text.enabledlayout.css.prefixes.webkit改為true以查看效果)。

參考:background-clip | MDN

效果[編輯原始碼]

我是彩虹文字 我是柔和的漸變色文字

橫着漸變也可以哦

用法[編輯原始碼]

{{Gradient_Text|渐变色代码|文字内容|title=鼠标悬停在文字上显示的注释}}

漸變色代碼[編輯原始碼]

<位置>,<顏色>,<顏色2>, ...

  • 說明:
  1. 漸變色代碼由若干個以逗號分隔的顏色(名稱或16進制代碼)組成。
  2. 位置為可選參數,可以填角度或者方位。

簡單的漸變[編輯原始碼]

要確定一個漸變色,至少需要兩個顏色。

最簡單的漸變色代碼就是將兩個或者兩個以上的顏色用逗號(英文半角)連接起來

代碼 效果
{{Gradient_Text|red,blue|我是渐变色文字}} 我是漸變色文字
{{Gradient_Text|red,orange,yellow,green,cyan,blue,purple|更多的颜色也可以}} 更多的顏色也可以

控制位置[編輯原始碼]

如果覺得上面的紅色的位置太小,你可以在顏色後面加一個表示位置的百分比數字,這樣在這個百分比的點上就會是這種顏色了。

代碼 效果
{{Gradient_Text|red 50%,blue|我是渐变色文字}} 我是漸變色文字

控制方向[編輯原始碼]

在顏色前面加上一個限定方向的詞就可以控制漸變色的方向。

代碼 效果
{{Gradient_Text|left,red,blue|我是渐变色文字}} 我是漸變色文字
{{Gradient_Text|top left,red,blue|这样是斜向的渐变}} 這樣是斜向的漸變
{{Gradient_Text|60deg,red,blue|还可以直接输入角度值}} 還可以直接輸入角度值

註釋文字[編輯原始碼]

|title=可設置鼠標懸停在漸變顏色文字上顯示的註釋文字。可選參數。

代碼 效果
{{Gradient_Text|left,red,blue|鼠标放在这里可以看到注释|title=我是注释}} 鼠標放在這裏可以看到註釋