grayscale灰度
sepia褐色
saturate飽和度
hue-rotate色相旋轉,默認0deg
invert反色
opacity透明度
brightness亮度
contrast對比度
blur模糊
drop-shadow陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filter-模糊</title>
<style>
.grayscale{
-webkit-filter:grayscale(1);
}
.sepia{
-webkit-filter:sepia(1);
}
.saturate{
-webkit-filter:saturate(0.5);
}
.saturate1{
-webkit-filter:saturate(3);
}
.hue-rotate{
-webkit-filter:hue-rotate(90deg);
}
.invert{
-webkit-filter:invert(1);
}
.opacity{
-webkit-filter:opacity(.2);
}
.brightness{
-webkit-filter:brightness(.5);
}
.contrast{
-webkit-filter:contrast(2);
}
.blur{
-webkit-filter:blur(3px);
}
.drop-shadow{
-webkit-filter:drop-shadow(5px 5px 5px #ccc);
}
.custom{
-webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7)
contrast(1.5) invert(0.2) brightness(.9);
}
</style>
</head>
<body>
</body>
</html>
image.png
