聊代码（第五十一集）css样式（之二十一）

，十种滤镜效果，见下图（依次为模糊、明亮、反差、黑白、色相旋转、底片、不透明度、饱和度、棕褐色、阴影）。

代码：

＜style type="text/css"＞img { width: 500px; height: auto; float: center; max-width: 0px; }

.❶模糊blur {-webkit-filter: blur(4px);}

.❷明亮brightness {-webkit-filter: brightness(250%);}

.❸反差contrast {-webkit-filter: contrast(180%);}

.❹黑白grayscale {-webkit-filter: grayscale(100%);}

.❺色相旋转huerotate {-webkit-filter: hue-rotate(280deg);}

.❻底片invert {-webkit-filter: invert(100%);}

.❼不透明度opacity {-webkit-filter: opacity(50%);}

.❽饱和度saturate {-webkit-filter: saturate(7);}

.❾棕褐色sepia {-webkit-filter: sepia(100%);}

.❿阴影shadow {-webkit-filter: drop-shadow(10px 8px 2px green);}

＜/style＞

＜div align="center"＞

＜img class="❶模糊blur" height="200" src="//image109.360doc.com/DownloadImg/2022/09/0312/251386960_1_20220903125019801.jpg" width="200" /＞＜/p＞

＜img class="❷明亮brightness" height="200" src="//image109.360doc.com/DownloadImg/2022/09/0312/251386960_1_20220903125019801.jpg" width="200" /＞ ＜p＞

＜img class="❸反差contrast" height="200" src="//image109.360doc.com/DownloadImg/2022/09/0312/251386960_1_20220903125019801.jpg" width="200" /＞＜/p＞

＜img class="❹黑白grayscale" height="200" src="//image109.360doc.com/DownloadImg/2022/09/0312/251386960_1_20220903125019801.jpg" width="200" /＞ ＜p＞

＜img class="❺色相旋转huerotate" height="200" src="//image109.360doc.com/DownloadImg/2022/09/0312/251386960_1_20220903125019801.jpg" width="200" /＞＜/p＞

＜img class="❻底片invert" height="200" src="//image109.360doc.com/DownloadImg/2022/09/0312/251386960_1_20220903125019801.jpg" width="200" /＞ ＜p＞

＜img class="❼不透明度opacity" height="200" src="//image109.360doc.com/DownloadImg/2022/09/0312/251386960_1_20220903125019801.jpg" width="200" /＞＜/p＞

＜img class="❽饱和度saturate" height="200" src="//image109.360doc.com/DownloadImg/2022/09/0312/251386960_1_20220903125019801.jpg" width="200" /＞ ＜p＞

＜img class="❾棕褐色sepia" height="200" src="//image109.360doc.com/DownloadImg/2022/09/0312/251386960_1_20220903125019801.jpg" width="200" /＞＜/p＞

＜img class="❿阴影shadow" height="200" src="//image109.360doc.com/DownloadImg/2022/09/0312/251386960_1_20220903125019801.jpg" width="200" /＞

代码说明：在css样式的命名中，附有序号和中文，目的是为了方便查找和了解其意。

海 特 行 者 欢 迎 你 ！