使用者:Leranjun/archive/Template:CSSFilter/doc

Template:CSSFilter 該模板使用Widget:CSSFilter重新開放被MW屏蔽掉的CSS filter屬性。該屬性可用的函數及其效果可以參考MDN官網。

用法

使用前應先調用此模板加載Widget。

{{CSSFilter}}

在想要添加filter的元素上添加cssfilter這個class，然後對應想要使用的filter函數增加data-cssfilter-函数名="函数内容"即可。

(ｉ)注意 如果其中任意一個函數名不合法（例如data-cssfilter-annangela="1"），則該函數會被忽略。 如果其中任意一個函數值不合法（例如data-cssfilter-blur="AnnAngela"），則所有filter都會被忽略；此時Widget會在控制台報錯，您可以打開開發者工具查看。

示例

<div class="cssfilter" data-cssfilter-blur="5px" data-cssfilter-opacity="0.8" style="background: #1976d2; width: 100px; height: 100px;"></div>

將會生成：

此時生成的CSS相當於：

filter: blur(5px) opacity(0.8);