filter 屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素，常用于調(diào)整圖像、背景和邊框的渲染。

一個 filter 例子

/*定義一個div基本樣式*/ div {   margin: 10px auto;   padding: 20px;   width: 200px;   border: 5px dashed orange; }  /* 濾鏡樣式 */ .filter-one {   -webkit-filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.7));   filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.7)); } 

定義了一個基本的 div 樣式，和一個濾鏡樣式類。這是一個為元素添加陰影的樣式。

<div>沒有濾鏡</div> <div class="filter-one">濾鏡 1</div> 

應(yīng)用之后，看一下效果如下：

這個濾鏡的效果非常的明顯。那濾鏡使用語法是什么樣的呢？

濾鏡函數(shù)

濾鏡多使用函數(shù)實現(xiàn)，常見的濾鏡函數(shù)及使用語法如下：

/* 濾鏡函數(shù)（ 值 ）*/ filter: blur(5px); /* 將高斯模糊應(yīng)用于輸入圖像。 */ filter: brightness(0.4); /* 將線性乘法器應(yīng)用于輸入圖像，以調(diào)整其亮度。 */ filter: contrast(200%); /* 調(diào)整輸入圖像的對比度。 */ filter: drop-shadow(16px 16px 20px blue); /* 沿圖像的輪廓生成陰影效果。 */ filter: grayscale(50%); /* 將圖像轉(zhuǎn)換為灰度圖。 */ filter: hue-rotate(90deg); /* 應(yīng)用色相旋轉(zhuǎn)。 */ filter: invert(75%); /* 反轉(zhuǎn)輸入圖像。 */ filter: opacity(25%); /* 應(yīng)用透明度。 */ filter: saturate(30%); /* 改變圖像飽和度。 */ filter: sepia(60%); /* 將圖像轉(zhuǎn)換為深褐色。 */ 

正如一開始所說，濾鏡多用于圖像，看看這些圖像應(yīng)用到同一張圖像上是什么效果。

.img-1 {   filter: blur(5px);   /* 將高斯模糊應(yīng)用于輸入圖像。 */ }  .img-2 {   filter: brightness(0.4);   /* 將線性乘法器應(yīng)用于輸入圖像，以調(diào)整其亮度。 */ }  .img-3 {   filter: contrast(200%);   /* 調(diào)整輸入圖像的對比度。 */ }  .img-4 {   filter: drop-shadow(16px 16px 20px yellow);   /* 沿圖像的輪廓生成陰影效果。 */ }  .img-5 {   filter: grayscale(50%);   /* 將圖像轉(zhuǎn)換為灰度圖。 */ }  .img-6 {   filter: hue-rotate(90deg);   /* 應(yīng)用色相旋轉(zhuǎn)。 */ }  .img-7 {   filter: invert(75%);   /* 反轉(zhuǎn)輸入圖像。 */ }  .img-8 {   filter: opacity(25%);   /* 應(yīng)用透明度。 */ }  .img-9 {   filter: saturate(30%);   /* 改變圖像飽和度。 */ }  .img-10 {   filter: sepia(60%);   /* 將圖像轉(zhuǎn)換為深褐色。 */ } 

<p>   <span>原圖</span>   <img src="../img/css-0.png" /> </p> <p>   <span>應(yīng)用樣式 img-1</span>   <img class="img-1" src="../img/css-0.png" /> </p> <p>   <span>應(yīng)用樣式 img-2</span>   <img class="img-2" src="../img/css-0.png" /> </p> <p>   <span>應(yīng)用樣式 img-3</span>   <img class="img-3" src="../img/css-0.png" /> </p> <p>   <span>應(yīng)用樣式 img-4</span>   <img class="img-4" src="../img/css-0.png" /> </p> <p>   <span>應(yīng)用樣式 img-5</span>   <img class="img-5" src="../img/css-0.png" /> </p> <p>   <span>應(yīng)用樣式 img-6</span>   <img class="img-6" src="../img/css-0.png" /> </p> <p>   <span>應(yīng)用樣式 img-7</span>   <img class="img-7" src="../img/css-0.png" /> </p> <p>   <span>應(yīng)用樣式 img-8</span>   <img class="img-8" src="../img/css-0.png" /> </p> <p>   <span>應(yīng)用樣式 img-9</span>   <img class="img-9" src="../img/css-0.png" /> </p> <p>   <span>應(yīng)用樣式 img-10</span>   <img class="img-10" src="../img/css-0.png" /> </p> 

這里展現(xiàn)出來的效果如下：

應(yīng)用多個濾鏡

.img-11 {   filter: drop-shadow(16px 16px 20px yellow) blur(1px); } 

同時應(yīng)用多個濾鏡，使用空格分隔。

<p>   <span>應(yīng)用樣式 .img-11</span>   <img class="img-11" src="../img/css-0.png" /> </p> 

當多個濾鏡應(yīng)用時，按順序依次應(yīng)用。

不使用濾鏡

如果不想使用濾鏡，可以把 filter 值設(shè)置成 none。

總結(jié)

• ?? filter 屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素，常用于調(diào)整圖像、背景和邊框的渲染。

• ?? filter 中可以應(yīng)用多個濾鏡，使用空格隔開，并按順序應(yīng)用。

• ?? filter 不應(yīng)用時值設(shè)置為 none。