CSS濾鏡

前面的話

  CSS濾鏡filter用於模糊、銳利化、元素變色等操作， 通常適用於圖片、背景等。本文將詳細介紹CSS濾鏡filter

 

語法

#filter

初始值: none

應用於: 所有元素

繼承性: 無

值: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate () | invert() | opacity() | saturate() | sepia() | url()

相容性: IE瀏覽器及android4.3-瀏覽器不支持，android4.4+需要添加-webkit-前綴

  [注意]使用空格分隔多個濾鏡。濾鏡通常使用百分比(如：75%)，也可以使用小數來表示(如：0.75)

 

灰階

grayscale

  透過使用灰階grayscale，會把圖片變成灰色。值為100%則完全轉為灰階影像，值為0%影像無變化，預設為0

 

飽和度

saturate

  值為0%則是完全不飽和，值為100%則影像無變化。超過100%的值是允許的，表示更高的飽和度。若值未設置，值預設為1

 

褐色

##sepia

  使用sepia將影像轉換為深褐色。值為100%完全是深褐色的，數值為0%影像無變化。若未設定，值預設為0

 

色相

#hue-rotate

  透過hue-rotate給影像套用色相旋轉。 "angle"一值設定影像會被調整的色環角度值。值為0deg，則影像無變化。若值未設置，預設值是0deg。值雖然沒有最大值，但超過360deg的值相當於又繞一圈

 

#反色

invert

#  透過invert反轉輸入影像。 100%表示完全反轉，數值為0%則影像無變化。若值未設置，值預設為0

 

透明度

#opacity

  透過opacity表示影像的透明程度。值為0%則為完全透明，數值為100%則影像無變化。若值未設置，值預設為1。此函數與現有的opacity屬性很相似，不同之處在於透過filter，有些瀏覽器為了提升效能會提供硬體加速

 

亮度

brightness

  透過調整亮度brightness使其看起來更亮或更暗。如果值是0%，影像會全黑。值是100%，則影像無變化。值超過100%也是可以的，影像會比原來更亮。如果沒有設定值，預設是1

 

對比度

contrast

  影像的對比contrast，值是0%的話，影像會全灰。值是100%，影像不變。值可以超過100%，代表會運用更低的對比。若沒有設定值，預設是1

 

模糊

#blur

  透過blur給影像設定高斯模糊。 "radius"一值設定高斯函數的標準差，或是螢幕上以多少像素融在一起，所以數值越大越模糊。如果沒有設定值，則預設為0；這個參數可設定css長度值，但不接受百分比值

 

陰影

drop-shadow

  drop-shadow(h-shadow v-shadow blur spread color)用來為圖片設定一個陰影效果。陰影是合成在影像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數接受

(在CSS3背景定義)類型的值，除了"inset"關鍵字是不允許的。此函數與現有的box-shadow屬性很相似；不同之處在於，通濾鏡，有些瀏覽器為了更好的效能會提供硬體加速

###參數如下：###

<offset-x><offset-y>(必须)   这是设置阴影偏移量的两个<length>值。<offset-x>设定水平方向距离，<offset-y>设定垂直距离。如果两个值都是0，则阴影出现在元素正后面
<blur-radius>(可选)          这是第三个<length>值。值越大，越模糊，则阴影会变得更大更淡。不允许负值。若未设定，默认是0(则阴影的边界很锐利)
<spread-radius>(可选)        这是第四个<length>值。正值会使阴影扩张和变大，负值会使阴影缩小。若未设定，默认是0(阴影会与元素一样大小)
<color>(可选)                查看<color>该值可能的关键字和标记。若未设定，颜色值会应用color属性的值。另外，如果颜色值省略，WebKit中阴影是透明的</color></color></length></spread-radius></length></blur-radius></offset-y></offset-x></length></offset-y></offset-x>

###  雖然drop-shadow不支援內陰影，但它可以實現不規則圖像的陰影，而box-shadow則無法實現######  [注意]關於盒子陰影的詳細資訊移步至此###

<style>
body{background-color: gray;}
.box{width: 260px;margin: 20px; padding: 20px;background-color: #fff;position: relative;font-size: 24px;line-height: 40px;}
.cor{position: absolute;left: -29px; top:27px;border: 15px solid transparent;border-right-color: #fff;}
.box-shadow{box-shadow: 5px 5px 10px black;}
.drop-shadow{filter: drop-shadow(5px 5px 10px black);}
</style>

<p>
    <i></i>
    box-shadow
</p>
<p>
    <i></i>
    filter: drop-shadow
</p>

############更多CSS濾鏡 相關文章請關注PHP中文網！ ###