css3 filter属性,不会ps也不要紧

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

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

filter 🔟种特效以下:web

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)复制代码

使用方法:bash

.sepia{
          -webkit-filter: sepia(1);
      }    复制代码


介绍到此,你们快来试试吧~~😄spa


参考连接code

相关文章
相关标签/搜索