模板:漸變發光
跳至導覽
跳至搜尋
本模板用於實現文字的漸變外發光效果,用戶可以設置外發光的顏色漸變方向、設置多層漸變顏色、設置外發光的寬度。
簡介
本模板疊加兩層文本,將下層文本以類似{{Gradient Text}}的方式形成漸變色後將其模糊化,以實現文字的漸變外發光效果。
由於目前的瀏覽器中,實現了background-clip:text
屬性的只有Edge和Webkit內核(Chrome,Safari,Android自帶瀏覽器,國產雙核瀏覽器的極速內核)的瀏覽器可以解析並顯示出效果。IE、Firefox 49以下顯示效果則是還原為原始的黑色字(Firefox 48可以打開about:config
,把layout.css.background-clip-text.enabled
和layout.css.prefixes.webkit
改為true
以查看效果)。
由於本模板使用了多層文本,在嵌套使用時強烈建議將其他模板置於此模板外層,否則會導致展開長度超級加倍。
- 本模板使用了模板樣式表,請勿將其直接展開後用於簽名。
參數
序號 | 參數名 | 說明 | 默認值 |
---|---|---|---|
1 | content | 文字內容 | 無 |
2 | FontColor | 文字顏色 | #FFF(白色) |
3 | GradientColor | 漸變代碼,具體用法可見{{Gradient Text}} | left,blue,red(從左到右、從藍色漸變為紅色) |
4 | GlowSize | 外發光尺寸(即底層模糊度),單位為px | 4 |
5 | CSS | 額外的CSS樣式,在這裡填寫可以減小展開長度 | 無 |
使用示例
代碼 | 效果 |
---|---|
{{渐变发光|content=从左到右的三色渐变|FontColor=white|GradientColor=left, #F37A93, #90ACF3, #F1D788|GlowSize=5}} |
從左到右的三色漸變從左到右的三色漸變從左到右的三色漸變從左到右的三色漸變從左到右的三色漸變從左到右的三色漸變 |
{{渐变发光|从左下到右上的<br>蓝紫红黄四色渐变|white|45deg, blue, purple, red, yellow|5|font-size:1.2em;font-weight:bold}} |
從左下到右上的 藍紫紅黃四色漸變從左下到右上的 藍紫紅黃四色漸變從左下到右上的 藍紫紅黃四色漸變從左下到右上的 藍紫紅黃四色漸變從左下到右上的 藍紫紅黃四色漸變從左下到右上的 藍紫紅黃四色漸變 |
相關模板
- {{Blur}}
- {{文字外發光}}
- {{Gradient Text}}
|