Template:文字模糊/doc - 版本历史

W：创建页面，内容为“ 借由 CSS3 `text-shadow` 属性实现的模糊效果。与 {{tl|模糊}}、{{tl|黑雾}} 等模板等价。 {{注意|兼容性问题}} '''现已知在iOS、iPadOS和MacOS的Safari上无法刮开模糊，但是指针悬停模式正常'''，如需解决可查看#Apple刮开模糊临时措施。 == 参数 == 除数字参数 `1` 以外均为可选参数。 * 数字参数 `1`：要模糊的文字内容。 * 数字参数
2023-04-01T10:47:32Z

创建页面，内容为“ 借由 CSS3 <code>text-shadow</code> 属性实现的模糊效果。与 {{tl|模糊}}、{{tl|黑雾}} 等模板等价。 {{注意|兼容性问题}} '''现已知在iOS、iPadOS和MacOS的Safari上无法刮开模糊，但是指针悬停模式正常'''，如需解决可查看#Apple刮开模糊临时措施。 == 参数 == 除数字参数 <code>1</code> 以外均为可选参数。 * 数字参数 <code>1</code>：要模糊的文字内容。 * 数字参数 <code…”

新页面

借由 CSS3 <code>text-shadow</code> 属性实现的模糊效果。与 {{tl|模糊}}、{{tl|黑雾}} 等模板等价。

{{注意|兼容性问题}} '''现已知在iOS、iPadOS和MacOS的Safari上无法刮开模糊，但是指针悬停模式正常'''，如需解决可查看[[#Apple刮开模糊临时措施]]。

== 参数 ==
除数字参数 <code>1</code> 以外均为可选参数。
* 数字参数 <code>1</code>：要模糊的文字内容。
* 数字参数 <code>2</code>：指针悬停在文字上时显示的内容（对移动设备不友好）。默认为 <code>你知道的太多了</code>。
* 参数 <code>sdcolor</code>：模糊文字所使用的颜色。默认为 <code>grey</code>。
* 参数 <code>sdsize</code>：模糊的距离，数值越大越模糊。默认为 <code>10px</code>。
* 参数 <code>css</code>：自定义其他 CSS 样式。
* 参数 <code>hover</code>：为<code>true</code>时，开启hover模式，鼠标放置于文字之上时可以渐变解除模糊，撤下时恢复模糊。hover模式中<code>sdsize</code>参数无效。
* 数字参数 <code>time</code>：当hover为<code>true</code>时，设置渐变动画的时长。单位秒，默认为0.75秒。

== 用法示例 ==

* 指针悬停模式。因前述兼容性问题，建议优先考虑加入<code>hover=true</code>参数。
<code><nowiki>{{文字模糊|如果你摘下眼镜后就是这种效果，那么恭喜你：你已经自带5像素的高斯模糊了|hover=true}}</nowiki></code>
{{文字模糊|如果你摘下眼镜后就是这种效果，那么恭喜你：你已经自带5像素的高斯模糊了|hover=true}}

* 常规用法。
<code><nowiki>{{文字模糊|犯人就是他↗|假的，哎哟我眼睛业障重啊}}</nowiki></code>
{{文字模糊|犯人就是他↗|假的，哎哟我眼睛业障重啊}}

* 指定文字颜色与模糊程度。
<code><nowiki>{{文字模糊|新版刮刮乐|sdcolor=#7BCC83|sdsize=3px}}</nowiki></code>
{{文字模糊|新版刮刮乐|sdcolor=#7BCC83|sdsize=3px}}

* 现暂无法在模板中直接加入链接（{{文字模糊|[[萌百娘]]}}）。请配合 {{tl|coloredlink}} 使用。（蓝链为 <code>#0645AD</code>，红链为 <code>#BA0000</code>）
<code><nowiki>{{文字模糊|{{coloredlink|rgba(0,0,0,0)|萌百娘}}|sdcolor=#0645AD}}</nowiki></code>
{{文字模糊|{{coloredlink|rgba(0,0,0,0)|萌百娘}}|sdcolor=#0645AD}}

==Apple刮开模糊临时措施==
如需要，可选择在您的[{{canonicalurl:Special:Mypage/common.js}} 个人JS]中添加：

<pre class="prettyprint lang-js">
if ( /Macintosh|iPhone|iPad/.test(navigator.userAgent) ) {
mw.loader.addStyleTag('.wenzimohu, .wenzimohu * { transition-duration: 0.75s; }');
mw.hook('wikipage.content').add(function ($content) {
$content.find(".wenzimohu , .wenzimohu ").filter(function () {
return $(this).css("color") == "rgba(0, 0, 0, 0)";
}).hover(function () {
$(this).css( "color", ($(this).css("text-shadow").match(/rgb\(.?\)/) || ["inherit"])[0]);
}, function () {
$(this).css("color", "rgba(0, 0, 0, 0)");
});
});
}
</pre>

{{格式模板}}
<noinclude>
[[Category:模板文档]]
</noinclude>