遮罩: -webkit-mask-image
-
效果
mask - 语法
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));
- 应用
- ps蒙版效果
- 参考地址
https://www.w3cplus.com/css3/css-masking.html
倒影: box-reflect
-
效果
box-reflect 语法
-webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.6));
// -webkit-box-reflect: <direction> <offset> <mask-box-image>;
-
应用
-
ps蒙版效果：因为倒影能设置透明度，只要将原
dom隐藏，并调整位置，即可模拟
box-reflect-1
-
ps蒙版效果：因为倒影能设置透明度，只要将原
参考地址
https://www.html.cn/book/css/properties/only-webkit/box-reflect.htm
https://blog.csdn.net/zhangqling/article/details/81608804
滤镜：CSS3的Filter
-
效果
Filter - 语法
暂未使用过 - 应用
前端更方便实现ps效果 - 参考地址
https://www.w3cplus.com/css3/ten-effects-with-css3-filter
https://www.runoob.com/cssref/css3-pr-filter.html
层叠样式：clip-path
神属性，吹爆他：可以改变div的展示形状，参考svg的clip-path
-
效果
clip-path
超神效果：http://species-in-pieces.com/ -
应用：
-
语法
参考地址： https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
层叠样式： shape-outside
相对于clip-path只改变了元素的展示形状，shape-outside直接改变了元素占据空间的形状。
两者结合使用，效果更佳。
-
效果
shape-outside 参考地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside
