一、clip-path 裁剪多边形
1. polygon裁剪多边形
clip-path: polygon(50% 0, 100% 100%, 0 100%);
2. inset按矩形剪裁
clip-path: inset(10% 10% 10% 10%);
3. circle按圆形剪裁
clip-path:circle(50% at 50% 50%); //按圆形剪裁,at 前的50%代表半径为50% , 后面的 50% 50% 代表圆心的位置
二、滤镜
1. backdrop-filter对元素后面的内容应用过滤效果
backdrop-filter: blur(12px);
2. filter滤镜置灰
filter: blur(10px) opacity(1);
html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); } // 页面置灰