CSS filter
Property

1. Select a property:
Applies a Gaussian blur to the input image. The passed parameter defines the value of the standard deviation to the Gaussian function.
The parameter is specified a CSS length (unit: px
), but does not accept percentage values.
Negative values are not allowed.
值一定要加上單位px
,值越大越模糊。
Default value when omitted is 0px
.
Applies a linear multiplier to input image, making it appear more or less bright.
A value of 0%
will create an image
that is completely black. A value of 100%
leaves the input unchanged. Other values are linear
multipliers
on the effect.
Values of amount over 100%
are allowed, providing brighter results.
值為0%
影像會全黑,100%
維持影像原本的亮度,超過100%
後開始提高影像亮度。
除了百分比以外,也接受正數作為值。輸入0.5
等同50%
、1
等同100%
、2
等同200%
。
Negative values are not allowed.
Default value when omitted is 1
.
Adjusts the contrast of the input.
A value of 0%
will create an image that is completely gray. A value of 100%
leaves the input unchanged. Values of amount
over 100%
are allowed, providing results with more contrast.
值為0%
影像會呈現全灰(毫無對比),100%
維持影像原本的對比度,超過100%
後開始提高影像對比度。
除了百分比以外,也接受正數作為值。輸入0.5
等同50%
、1
等同100%
、2
等同200%
。
Negative values are not allowed.
Default value when omitted is 1
.
Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image’s alpha mask drawn in a particular color, composited below the image.
Values are interpreted as for box-shadow
but with the optional 3rd
<length>
value being the standard deviation
instead of blur radius.
四個值依序為:陰影X軸偏移距離(正整數往右、負整數往左)、陰影Y軸偏移距離(正整數往下、負整數往上)、陰影模糊(blur)程度、陰影顏色。
陰影模糊(blur)程度沒有註明的話,等同呈現0px(無模糊)的陰影。
陰影顏色支援關鍵字、hex、rgba、hsla。沒有註明的話,引用currentColor
的值。
The keyword currentcolor
represents value of the color property on the same element. Its used
values is determined by
resolving color values.
The default value for omitted values is missing length values set to 0
and the missing used
color is taken
from the
color property.
Converts the input image to grayscale. The passed parameter defines the proportion of the conversion.
A value of 100%
is completely grayscale. A value of 0%
leaves the input
unchanged. Values between 0%
and 100%
are linear
multipliers on the effect. Values of amount over 100%
are allowed but UAs must clamp the values
to 1
.
值為100%
時影像會完全灰階化,0%
則維持影像原本的彩度,值可以超過100%
,但結果與輸入100%
相同。
除了百分比以外,也接受正數作為值。輸入0.5
等同50%
、1
等同100%
。
Negative values are not allowed.
Default value when omitted is 1
.
Applies a hue rotation on the input image. The passed parameter defines the number of degrees around the color circle the input samples will be adjusted.
值可以超過360deg
,超出的值請想像色環轉了一圈繼續轉。比如輸入450deg
的話,呈現的結果會與輸入90deg
一樣,因為450-360=90。同理如果輸入負整數的值,就是讓色環逆時針旋轉。
A value of 0deg
leaves the input unchanged. Implementations must not normalize this value in
order to allow animations
beyond .
The unit identifier may be omitted if the <angle>
is zero.
Default value when omitted is 0deg
.
Inverts the samples in the input image. The passed parameter defines the proportion of the conversion.
A value of 100%
is completely inverted. A value of 0%
leaves the input
unchanged.
Values between 0%
and
100%
are linear
multipliers on the effect. Values of amount over 100%
are allowed but UAs must clamp the
values
to 1
.
值100%
會讓影像完全負片,50%
讓影像完全失去對比,0%
則讓影像保持原狀。
值可以超過100%
,但結果與輸入100%
相同。
除了百分比以外,也接受正數作為值。輸入0.5
等同50%
、1
等同100%
。
Negative values are not allowed.
Default value when omitted is 1
.
Applies transparency to the samples in the input image. The passed parameter defines the proportion of the conversion.
A value of 0%
is completely transparent. A value of 100%
leaves the input
unchanged. Values between 0%
and
100%
are
linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount.
Values of amount
over 100%
are allowed but UAs must clamp the values to 1
.
值為0%
時會讓影像呈現完全透明,100%
則讓影像保持原狀。
值可以超過100%
,但結果與輸入100%
相同。
除了百分比以外,也接受正數作為值。輸入0.5
等同50%
、1
等同100%
。
Negative values are not allowed.
Default value when omitted is 1
.
Saturates the input image. The passed parameter defines the proportion of the conversion.
A value of 0%
is completely un-saturated. A value of 100%
leaves the input
unchanged. Other values are
linear
multipliers on the effect. Values of amount over 100%
are allowed, providing super-saturated
results.
值為0%
時會讓影像的飽和度歸零,100%
則讓影像保持原狀。
值可以超過100%
,超過100%
代表繼續增加影像的飽和度。
除了百分比以外,也接受正數作為值。輸入0.5
等同50%
、1
等同100%
、2
等同200%
。
Negative values are not allowed.
Default value when omitted is 1
.
Converts the input image to sepia. The passed parameter defines the proportion of the conversion.
A value of 100%
is completely sepia. A value of 0%
leaves the input unchanged.
Values between 0%
and 100%
are linear
multipliers on the effect. Values of amount over 100%
are allowed but UAs must clamp the
values
to 1
.
設定影像的懷舊濾鏡,值為100%
代表濾鏡程度開到最大,0%
則讓影像保持原狀。
值可以超過100%
,但結果與輸入100%
相同。
除了百分比以外,也接受正數作為值。輸入0.5
等同50%
、1
等同100%
。
Negative values are not allowed.
Default value when omitted is 1
.