css3 filter属性,不会ps也没关系

354 阅读1分钟

说到 CSS3 filter,咱们先几张图的对比:

很明显嘛,这不就是 ps 后的效果嘛~其实巧用 CSS3 的 filter 特性就能用一行代码实现这些效果!!

filter 🔟种特效如下:

grayscale 灰度  默认 100%

sepia 褐色(怀旧)  默认 100%

saturate 饱和度  默认 100%

hue-rotate 色相旋转  默认 0deg

invert 反色(相机底色)  默认 100%

opacity 透明度  默认 100%

brightness 亮度  默认 100%

contrast 对比度  默认 100%

blur 模糊  默认 0px

drop-shadow 阴影  eg:(5px 5px 5px #ccc)

使用方法:

.sepia{
          -webkit-filter: sepia(1);
      }    


介绍到此,大家快来试试吧~~😄


参考链接