簡介
filter
：濾鏡
drop-shadow
：給圖像設定一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顔色畫出的遮罩圖的偏移版本
浏覽器相容性
filter 函數
1.blur(px)
給圖像設定高斯模糊,值越大越模糊。
預設是0，可設定css長度值，但不接受百分比值。
2.url()
接受一個XML檔案。該檔案設定了 一個SVG濾鏡，且可以包含一個錨點來指定一個具體的濾鏡元素。
如：
filter: url(svg-url#element-id)
3.hue-rotate(deg)
給圖像應用色相旋轉。
0deg：圖像無變化。若值未設定，預設值是0deg。
該值雖然沒有最大值，超過360deg的值相當于又繞一圈。
4.brightness(%)
給圖檔應用一種線性乘法，使其看起來更亮或更暗。
0%：圖像會全黑；100%：圖像不變。
值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，預設是1。
5.contrast(%)
調整圖像的對比度。
0%：圖像會全黑；100%：圖像不變。
可以超過100%，意味着會運用更低的對比。若沒有設定值，預設是1。
6.saturate(%)
轉換圖像飽和度。
0%：完全不飽和；100%：圖像無變化。
超過100%的值是允許的，則有更高的飽和度。 若值未設定，值預設是1。
7.opacity(%)
轉化圖像的透明程度。
0%：完全透明，100%：圖像無變化。
值在0%和100%之間，則是效果的線性乘子，也相當于圖像樣本乘以數量。 若值未設定，值預設是1
8.grayscale(%)
将圖像轉換為灰階圖像。
100%：完全轉為灰階圖像；0%：圖像無變化。
值在0%到100%之間，則是效果的線性乘子。若未設定，值預設是0；
9.sepia(%)
将圖像轉換為深褐色。
100%：完全轉為深褐色；0%：圖像無變化。
值在0%到100%之間，則是效果的線性乘子。若未設定，值預設是0；
10.invert(%)
反轉輸入圖像。
100%：完全反轉；0%：圖像無變化。
值在0%和100%之間，則是效果的線性乘子。 若值未設定，值預設是0。
11.drop-shadow()
給圖像設定一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顔色畫出的遮罩圖的偏移版本。
參數與box-shadow類似。但
inset
關鍵字不允許。
應用：圓缺角邊框+陰影
.shadow{
color: #fff;
font-size: 24px;
text-align: center;
width: 200px;
height: 200px;
line-height: 200px;
/*漸變背景制作圓缺角*/
background:
radial-gradient(circle at top left, transparent 25px, red 0) top left,
radial-gradient(circle at top right, transparent 25px, red 0) top right,
radial-gradient(circle at bottom right, transparent 25px, red 0) bottom right,
radial-gradient(circle at bottom left, transparent 25px, red 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
/*不規則陰影*/
filter:drop-shadow(0 0 12px rgba(0,0,0,0.5));
}
效果圖：
我的
個人部落格
有空來坐坐
https://www.wangyanan.online