如同ps般的css属性-webkit-filter

-webkit-filter

楼主不易，转载声明 首先，我们先来看一下-webkit-filter是什么？如下： -webkit-filter有什么用 -webkit-filter的语法结构 -webkit-filter的可选属性 -webkit-filter效果及代码一览 那么让我么一起走进css的神奇世界吧

-webkit-filter有什么用

-webkit-filter：CSS的滤镜属性。可以在元素呈现之前，为元素渲染提供效果。常用于图像、背景、边框的渲染。

-webkit-filter的语法结构

-webkit-filter: none | blur(px) | brightness(%) | contrast(%) | grayscale(%) | hue-rotate(deg) | invert(%) | opacity(%) | saturate(%) | sepia(%) | drop-shadow( radius ) | url() ;

-webkit-filter的可选属性

回到顶部

• none：默认值，无效果。
• blur(px)：高斯模糊。
• brightness(%)：亮度。
• contrast(%)：对比度。
• grayscale(%)：灰度。
• hue-rotate(deg)：色相旋转。
• invert(%)：反色。
• opacity(%)：透明度。
• saturate(%)：饱和度。
• sepia(%)：褐色。
• drop-shadow(radius)： 阴影。
• url()：URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
  
  

-webkit-filter效果及代码一览

回到顶部

none：

• 原图片
  代码：

.img{ -webkit-filter:none;}

回到顶部

blur()：

• 图片模糊度5px
  代码：

.img{ -webkit-filter: blur(5px);}

回到顶部

brightness()

• 图片180%的亮度
  代码：

.img{ -webkit-filter: brightness(180%);}

回到顶部

contrast()：

• 图片200%的对比度
  代码：

 .img{ -webkit-filter: contrast(200%);}

回到顶部

grayscale()：

• 图片100%的图片灰度
  代码：

.img{ -webkit-filter: grayscale(100%);}

回到顶部

hue-rotate()：

• 图片色相旋转180度
  代码：

.img{ -webkit-filter: hue-rotate(180deg);}

回到顶部

invert()：

• 图片100%反色
  代码：

.img{ -webkit-filter: invert(100%);}

回到顶部

opacity()：

• 图片50%透明度
  代码：

 .img{ -webkit-filter: opacity(50%);}

回到顶部

saturate()：

• 图片饱和度200%
  代码：

.img{ -webkit-filter: saturate(200%);}

回到顶部

sepia()：

• 图片100%褐色
  代码：

.img{ -webkit-filter: sepia(100%);}

回到顶部

drop-shadow()：

• 图片阴影X偏移10px，y偏移10px，模糊为15px的蓝色阴影
  代码：

.img{ -webkit-filter: drop-shadow(10px 10px 15px blue);}

回到顶部