遮罩: -webkit-mask-image
-
效果
mask - 語法
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));
- 應(yīng)用
- 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)用
-
ps蒙版效果:因為倒影能設(shè)置透明度,只要將原
dom隱藏,并調(diào)整位置,即可模擬
box-reflect-1
-
ps蒙版效果:因為倒影能設(shè)置透明度,只要將原
參考地址
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)用:
-
語法
參考地址: 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





