CSS filter滤镜属性、clip-path裁减属性

CSS filter滤镜属性、clip-path裁减属性

filter

1. contrast(amount) 调整输入的对比度

amount<number>或amount <percentage>
小于100%会降低对比度，大于100%增加对比度。值0%将创建一个完全灰色的图像，而值将100%保持输入不变

div{
  filter: contrast(1); 
}

2. hue-rotate(angle) 调整输入的色相 （色相旋转）

angle<angle>指定为角度，hue-rotate滤镜除了支持deg，还支持其它CSS3单位，如圈数turn以及弧度rad等
值0deg保持输入不变。正色调旋转增加色调值，而负旋转减少色调值。

更多参考：CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产

hue-rotate(90deg)   /* 90度旋转 */
hue-rotate(.5turn)       /* 180度旋转 */
hue-rotate(3.142rad)     /* 3.142弧度旋转，近似一圈，也就是360度 */

clip-path

1. inset(<top> <right> <bottom> <left>) 裁剪一个矩形

2. polygon() 定义一个多边形（使用一个 SVG 填充规则和一组顶点

clip-path: polygon(0% 20%,
                  60% 20%,
                  60% 0%,
                 100% 50%,
                  60% 100%,
                  60% 80%,
                   0% 80%);