要什么 Photoshop，会这些 CSS 就够了

标题党一时爽，一直标题党一直爽

 

还在上大学那会儿，我就喜欢玩 Photoshop。后来写网页的时候，因为本身太菜，好多花里胡哨的效果都得借助 Photoshop 实现，当时就特别但愿 CSS 能像 Photoshop 同样处理图片。

随着对 CSS 的了解越多，我发现 CSS 有不少平时用得少（或者不会用），但很是厉害的属性。这些属性实现了不少 Photoshop 的功能，好比滤镜、混合模式。

我简单整理了一下，因为这些属性的功能十分强大，每个属性都能单独成文，因此这里只是作一个目录。

 

1、渐变 Gradient

渐变在 PS 里面是一个很经常使用的功能，在工做中用到 CSS 渐变的场景也很多

但除了简单的线性渐变、径向渐变以外，还能够用渐变作出这样的效果：

甚至是用渐变作一个进度条：

 

相关文章：
《使用 CSS 渐变》

《CSS3 Gradient 渐变还能这么玩》

 

 

2、倒影 box-reflect

这个属性能够使某个 DOM 元素产生一个倒影，而且能够规定倒影的方向和距离

另外还能够给这个倒影添加一个遮罩，好比一个透明渐变：

-webkit-box-reflect: below -7px linear-gradient(to bottom,transparent,rgba(0,0,0, 0.4));

 

相关文章：

《-webkit-box-reflect》

《CSS 倒影》

 

 

3、阴影 box-shadow / text-shadow

又是一个很常见的属性，但一般都是用来作一些简单的阴影，好比：

但结合 animation 与 transform，就能够作出这样的动画：

CodePen Demo -- CSS Checker Illusion( By David Khourshid )

 

相关文章：

《box-shadow》

《你所不知道的 CSS 阴影技巧与细节》

 

 

4、 裁剪 clip-path

这个属性能够建立一个裁剪区域，让元素只显示区域内的内容，有点像 Photoshop 中“路径+蒙版”的效果

这个属性值最强大的地方在于，能够很是自由的绘制多边形：

 

 

相关文章：

《clip-path》

《CSS clip-path maker》

《难以想象的CSS之CLIP-PATH》

 

 

5、蒙板 mask

蒙板的效果是在原图形上面，在蒙上一层图形，获得一个新的图形

因为蒙板图形能够是透明的，因此有些用 clip-path 实现的效果，也能够用 mask 实现

在我看来，mask 和 background 是高度相似的，区别在于 background 位于底层，而 mask 在顶层

 

相关文章：

《CSS遮罩CSS3 mask/masks详细介绍》

《CSS3蒙版》

《CSS3 的一对孪生兄弟之 background & mask》

 

 

6、滤镜 filter

滤镜应该也算比较经常使用的属性了，同一张图叠加不一样的滤镜以后，能呈现各类各样的效果：

但这只是基本用法！

filter 能够作出不少漂亮的效果，特别是结合 animation 以后，这些高级技巧能够参考下面的“相关文章”，看完以后我都惊呆了

 

相关文章：

《filter》

《你所不知道的 CSS 滤镜技巧与细节》

《QQ 未读消息的拖拽动态效果是如何实现的？ - 祥子的回答 - 知乎》

《从酷炫的果冻菜单谈起 CSS3 filter 属性》

 

 

7、混合模式 blend-mode

若是对 Photoshop 的混合模式很熟悉的话，这个属性也很是好理解

在 CSS 里面，有 mix-blend-mode 和 background-blend-mode 两种用法

呈现的效果和上面的 filter 相似，也是让原图形叠加以后产生化学反应，好比用 CSS 作一个抖音的 LOGO：

CodePen Demo -- 使用 mix-blend-mode 实现抖音 LOGO

 

相关文章：

《混合模式》

《mix-blend-mode的使用》

《探究 CSS 混合模式\滤镜致使 CSS 3D 失效问题》