遮罩: -webkit-mask-image

• 效果

  
  
  mask
• 語法

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

• 應(yīng)用
  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>;

• 應(yīng)用

  1. ps蒙版效果：因為倒影能設(shè)置透明度，只要將原dom隱藏，并調(diào)整位置，即可模擬
     
     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
• 語法
  暫未使用過
• 應(yīng)用
  前端更方便實現(xiàn)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/

• 應(yīng)用：

  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直接改變了元素占據(jù)空間的形狀。
兩者結(jié)合使用，效果更佳。

• 效果

  
  
  shape-outside

• 參考地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside