那些好用的css属性(不考虑兼容性)

遮罩: -webkit-mask-image

• 效果

  
  
  mask
• 语法

-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0)); 

• 应用
  1. 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>;

• 应用

  1. ps蒙版效果：因为倒影能设置透明度，只要将原dom隐藏，并调整位置，即可模拟
     
     box-reflect-1

• 参考地址
  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/

• 应用：

  1. https://www.html.cn/tool/css-clip-path/
  2. 做动画

• 语法

  1. https://www.html.cn/tool/css-clip-path/
  2. 见参考地址

• 参考地址： 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