CSS3支援濾鏡嗎

CSS3支援多種濾鏡。 CSS3中可利用filter屬性來為元素添加濾鏡效果，此屬性內建多種濾鏡函數：blur()設定模糊濾鏡、brightness()設定亮度濾鏡、contrast()設定對比濾鏡、grayscale()設定灰階濾鏡等。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css3支援很多種濾鏡，透過css3濾鏡filter屬性，我們可以製作出類似photoshop的濾鏡效果。例如為圖片製作模糊效果，陰影效果，濾色效果等。

Filter	描述
#blur(px)	給影像設定高斯模糊。 "radius"一值設定高斯函數的標準差，或是螢幕上以多少像素融在一起， 所以值越大越模糊； 如果沒有設定值，則預設為0；這個參數可設定css長度值，但不接受百分比值。
brightness(%)	為圖片套用一種線性乘法，使其看起來更亮或更暗。如果值是0%，影像會全黑。值是100%，則影像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，影像會比原來更亮。如果沒有設定值，預設是1。
contrast(%)	調整影像的對比。數值是0%的話，影像會全黑。值是100%，影像不變。值可以超過100%，代表會運用更低的對比。若沒有設定值，預設是1。
drop-shadow(h-shadow v-shadow blur spread color)	#給圖片設定一個陰影效果。陰影是合成在影像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數接受2682287aecd16e99c4f70c025ad645ed(在CSS3背景定義)類型的值，除了"inset"關鍵字是不允許的。此函數與現有的box-shadow box-shadow屬性很相似；不同之處在於，透過濾鏡，有些瀏覽器為了更好的效能會提供硬體加速。 <code style="font-style: normal;line-height: 1.5">2682287aecd16e99c4f70c025ad645ed參數如下： <code style="font-style: normal;line-height: 1.5"><ul> <li> <strong>#8b89863bbb9a724179580669ccdd6d16</strong> <strong>d1d21daad911d430a139ccdb7ee6c1d6</strong> <small>(必須)</small> </li> <li>這是設定陰影偏移量的兩個d82af2074b26fcfe177e947839b5d381值. <strong>8b89863bbb9a724179580669ccdd6d16</strong> 設定水平方向距離.負值會使陰影出現在元素左邊. <strong>d1d21daad911d430a139ccdb7ee6c1d6</strong>設定垂直距離.負值會使陰影出現在元素上方。查看<strong>d82af2074b26fcfe177e947839b5d381</strong>可能的單位.<br> <strong><span style="font-family:Open Sans, sans-serif">如果兩個值都是</span>0</strong>, 則陰影出現在元素正後面(如果設定了<span style="line-height: 1.5"> </span><code style="font-style: normal;line-height: 1.5">747111f72d266ea1b5d91cda9f8aa39e<span style="line-height: 1.5"> and/or </span><code style="font-style: normal;line-height: 1.5">5e387985f926f4cd5497444dde74a02d，<span style="line-height: 1.5">將會有模糊效果</span><span style="line-height: 1.5">).</span> <code style="font-style: normal;line-height: 1.5"><code style="font-style: normal;line-height: 1.5"> 747111f72d266ea1b5d91cda9f8aa39e (可選) 這是第三個code>d82af2074b26fcfe177e947839b5d381值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值若未設定，預設是0 (則陰影的邊界很銳利). 5e387985f926f4cd5497444dde74a02d (可選) 這是第四d82af2074b26fcfe177e947839b5d381 值。正數值會使陰影擴張變大，負值會是陰影縮小.若未設定，預設是0 (陰影會與元素一樣大小).  注意: Webkit, 以及一些其他瀏覽器不支援第四個長度，如果加了也不會渲染。   b10fb37415d019cfffa8c4d7366c607f (可選) #查看b10fb37415d019cfffa8c4d7366c607f該值可能的關鍵字和標記。若未設定，顏色值基於瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會套用colorcolor屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。 <code style="font-style: normal;line-height: 1.5"><code style="font-style: normal;line-height: 1.5">
#grayscale(%)	將影像轉換為灰階影像。值定義轉換的比例。值為100%則完全轉為灰階影像，數值為0%影像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值預設為0；
hue-rotate(deg)	#給影像套用色相旋轉。 "angle"一值設定影像會被調整的色環角度值。值為0deg，則影像無變化。若值未設置，預設值是0deg。該值雖然沒有最大值，超過360deg的值相當於又繞一圈。
invert(%)	#反轉輸入影像。值定義轉換的比例。 100%的價值是完全反轉。值為0%則影像無變化。值在0%和100%之間，則是效果的線性乘子。若值未設置，值預設為0。
opacity(%)	#轉換影像的透明程度。值定義轉換的比例。值為0%則為完全透明，數值為100%則影像無變化。值在0%和100%之間，則是效果的線性乘子，也相當於影像樣本乘以數量。若值未設置，值預設為1。函數與現有的opacity屬性很相似，不同之處在於透過filter，有些瀏覽器為了提升效能會提供硬體加速。
saturate(%)	#轉換影像飽和度。值定義轉換的比例。值為0%則是完全不飽和，數值為100%則影像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。若值未設置，值預設為1。
sepia(%)	#將影像轉換為深褐色。值定義轉換的比例。值為100%則完全是深褐色的，數值為0%影像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值預設為0；
url()	URL函數接受一個XML文件，該文件設定了一個SVG濾鏡，且可以包含一個錨點來指定一個特定的濾鏡元素。 例如： filter: url(svg-url#element-id)

#用法範例

/* 使用SVG filter */
filter: url("filters.svg#filter-id");
/* 使用filter函数 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* 多个filter */
filter: contrast(175%) brightness(3%);
/* 不使用filter */
filter: none;
/* 全局变量 */
filter: inherit;
filter: initial;
filter: unset;

（學習影片分享：css影片教學）

以上是CSS3支援濾鏡嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！