模板:文字描边：修订间差异

来自Limbo Wiki Mirror
下一编辑→
可视化wikitext
创建页面，内容为“<includeonly><span style="position:relative;display:inline-block;z-index:2;color:{{{2|{{{文本颜色|}}}}}};{{{CSS|}}}">{{{1}}}<span style="position:absolute;left:0;top:0;z-index:-1;-webkit-user-select:none;user-select:none;-webkit-text-stroke:{{{描边宽度|0.15em}}} {{{3|{{{描边颜色|#222}}}}}};{{{CSS2|}}}">{{{1}}}</span></span></includeonly><noinclude>{{default|text=本模板来自moegirl:模板:文字描边2}}</noinclude>”
 
无编辑摘要
第1行： 第1行：
<includeonly><span style="position:relative;display:inline-block;z-index:2;color:{{{2|{{{文本颜色|}}}}}};{{{CSS|}}}">{{{1}}}<span style="position:absolute;left:0;top:0;z-index:-1;-webkit-user-select:none;user-select:none;-webkit-text-stroke:{{{描边宽度|0.15em}}} {{{3|{{{描边颜色|#222}}}}}};{{{CSS2|}}}">{{{1}}}</span></span></includeonly><noinclude>{{default|text=本模板来自[[moegirl:模板:文字描边2]]}}</noinclude>
<includeonly><span style="position:relative;display:inline-block;z-index:2;color:{{{2|{{{文本颜色|}}}}}};{{{CSS|}}}">{{{1}}}<span style="position:absolute;left:0;top:0;z-index:-1;-webkit-user-select:none;user-select:none;-webkit-text-stroke:{{{描边宽度|0.15em}}} {{{3|{{{描边颜色|#222}}}}}};{{{CSS2|}}}">{{{1}}}</span></span></includeonly><noinclude>{{default|text=本模板来自[[moegirl:模板:文字描边2]]}}
本模板使用CSS的[https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-text-stroke <code>-webkit-text-stroke</code>]属性，可以为文字添加描边样式。
 
==参数==
{|class="wikitable" style="text-align:center"
!参数!!说明!!默认值
|-
|（1）
|style="text-align:left"|需要添加描边的文本，'''必需'''||''无''
|-
|文本颜色（2）
|rowspan="2" style="text-align:left"|使用CSS颜色值，如：<code>red</code> / <code>#114514</code> / <code>rgb(191, 98, 10)</code> / <code>hsl(0deg, 100%, 50%)</code> 。<br>[https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value MDN中的&lt;颜色值&gt;]。
|继承
|-
|描边颜色（3）||黑色
|-
|描边宽度
|style="text-align:left"|使用CSS长度，如：<code>1px</code> / <code>0.2em</code> 等（实际描边宽度是这个值的一半）；或使用<code>thin</code>、<code>medium</code>、<code>thick</code>关键字，由细到粗。<br>推荐使用em为单位以保持在各设备上的统一。
|0.15em
|-
|CSS
|style="text-align:left"|额外的CSS属性。
|''无''
|-
|CSS2
|style="text-align:left"|仅对描边层应用的CSS属性，会覆盖上面的CSS。<br>此参数本用于解决“直接使用CSS参数添加阴影会有双层阴影”的问题，如无必要不推荐添加阴影，因为不同浏览器间text-shadow和text-stroke的相互作用方式不统一，在Safari上会有非常鬼畜的效果。
|''无''
|}
 
==示例==
{|class="wikitable" style="width:100%"
!输入!!结果
|-
|<code><nowiki>{{文字描边|黑字加黑边，还不如用粗体}}</nowiki></code>||{{文字描边|黑字加黑边，还不如用粗体}}
|-
|<code><nowiki>{{文字描边|使用匿名参数|#FFF|#FF9595}}</nowiki></code>||{{文字描边|使用匿名参数|#FFF|#FF9595}}
|-
|<code><nowiki>{{文字描边|使用命名参数|文本颜色=white|描边宽度=0.1em}}</nowiki></code>||{{文字描边|使用命名参数|文本颜色=white|描边宽度=0.1em}}
|-
|<code><nowiki>{{文字描边2|使用CSS|文本颜色=antiquewhite|描边颜色=brown|CSS=font-size:1.5em}}</nowiki></code>||{{文字描边|使用CSS|文本颜色=antiquewhite|描边颜色=brown|CSS=font-size:1.5em}}
|}
 
==限制==
*阴影在Safari上渲染异常，尽量不要添加阴影。
 
</noinclude>

2022年6月25日 (六) 18:54的版本

本模板使用CSS的-webkit-text-stroke属性，可以为文字添加描边样式。

参数

参数 说明 默认值
（1） 需要添加描边的文本，必需 无
文本颜色（2） 使用CSS颜色值，如：red / #114514 / rgb(191, 98, 10) / hsl(0deg, 100%, 50%) 。
MDN中的<颜色值>。 		继承
描边颜色（3） 黑色
描边宽度 使用CSS长度，如：1px / 0.2em 等（实际描边宽度是这个值的一半）；或使用thin、medium、thick关键字，由细到粗。
推荐使用em为单位以保持在各设备上的统一。 		0.15em
CSS 额外的CSS属性。 无
CSS2 仅对描边层应用的CSS属性，会覆盖上面的CSS。
此参数本用于解决“直接使用CSS参数添加阴影会有双层阴影”的问题，如无必要不推荐添加阴影，因为不同浏览器间text-shadow和text-stroke的相互作用方式不统一，在Safari上会有非常鬼畜的效果。 		无

示例

输入 结果
{{文字描边|黑字加黑边，还不如用粗体}} 黑字加黑边，还不如用粗体黑字加黑边，还不如用粗体
{{文字描边|使用匿名参数|#FFF|#FF9595}} 使用匿名参数使用匿名参数
{{文字描边|使用命名参数|文本颜色=white|描边宽度=0.1em}} 使用命名参数使用命名参数
{{文字描边2|使用CSS|文本颜色=antiquewhite|描边颜色=brown|CSS=font-size:1.5em}} 使用CSS使用CSS

限制

  • 阴影在Safari上渲染异常，尽量不要添加阴影。


检索自“https://wm.gaoice.run/index.php?title=模板:文字描边&oldid=27401”