个人学习 CSS:filter 过程中写的笔记,不具备任何价值。CSS 滤镜(filter)属提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。FILTER URL 还不是很明白…
语法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| filter: url("filters.svg#filter-id");
filter: blur(0px); filter: brightness(100%); filter: contrast(100%); filter: drop-shadow($offset-x $offset-y $blur $spread $color); filter: grayscale(0%); filter: hue-rotate(0deg); filter: invert(0%); filter: opacity(100%); filter: saturate(100%); filter: sepia(0%);
filter: contrast(100%) brightness(100%);
filter: inherit; filter: initial; filter: unset;
|
实例
1 2 3 4
| img { filter: grayscale(0.5) blur(10px); }
|
CSS:filter 浏览器支持
浏览器 |
Chrome |
Firefox |
Safari |
Opera |
Edge |
IE |
支持 filter 版本 |
18.0 -webkit- |
35.0 |
6.0 -webkit- |
15.0 -webkit- |
12 |
No |
参考资料:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter