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

柔情只为你懂 2023-08-17 15:35 142阅读 0赞

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

还在上大学那会儿，我就喜欢玩 Photoshop。后来写网页的时候，由于自己太菜，好多花里胡哨的效果都得借助 Photoshop 实现，当时就特别希望 CSS 能像 Photoshop 一样处理图片。

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

我简单整理了一下，由于这些属性的功能十分强大，每一个属性都能单独成文，所以这里只是做一个目录。

**一、渐变 Gradient**

渐变在 PS 里面是一个很常用的功能，在工作中用到 CSS 渐变的场景也不少

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

![1059788-20190728144501686-1211366423.png][]

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

![1059788-20190728144646851-727043448.png][]

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

[《CSS3 Gradient 渐变还能这么玩》][CSS3 Gradient]

**二、倒影 box-reflect**

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

另外还可以给这个倒影添加一个遮罩，比如一个透明渐变：

![1059788-20190728150440507-1886501899.png][]

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

**相关文章：**

[《-webkit-box-reflect》][-webkit-box-reflect]

[《CSS 倒影》][CSS 1]

**三、阴影 box-shadow / text-shadow**

又是一个很常见的属性，但通常都是用来做一些简单的阴影，比如：

![1059788-20190728152414109-289599193.png][]

但结合 animation 与 transform，就可以做出这样的动画：

![1059788-20190728152243542-1767600409.gif][]

[CodePen Demo -- CSS Checker Illusion( By David Khourshid )][CodePen Demo -- CSS Checker Illusion_ By David Khourshid]

**相关文章：**

[《box-shadow》][box-shadow]

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

**四、 裁剪 clip-path**

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

![1059788-20190728153140052-1383008489.png][]

这个属性值最强大的地方在于，可以非常自由的绘制多边形：

![1059788-20190728153341717-637351361.png][]

**相关文章：**

[《clip-path》][clip-path]

[《CSS clip-path maker》][CSS clip-path maker]

[《不可思议的CSS之CLIP-PATH》][CSS_CLIP-PATH]

**五、蒙板 mask**

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

由于蒙板图形可以是透明的，所以有些用 clip-path 实现的效果，也可以用 mask 实现

![1059788-20190728155945350-603868509.png][]

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

**相关文章：**

[《CSS遮罩CSS3 mask/masks详细介绍》][CSS_CSS3 mask_masks]

[《CSS3蒙版》][CSS3]

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

**六、滤镜 filter**

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

![1059788-20190728160537832-340238685.png][]

但这只是基本用法！

filter 可以做出很多漂亮的效果，特别是结合 animation 之后，这些高级技巧可以参考下面的“相关文章”，看完之后我都惊呆了

**相关文章：**

[《filter》][filter]

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

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

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

**七、混合模式 blend-mode**

如果对 Photoshop 的混合模式很熟悉的话，这个属性也非常好理解

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

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

![1059788-20190728162910894-654052559.png][]

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

**相关文章：**

[《混合模式》][Link 1]

[《mix-blend-mode的使用》][mix-blend-mode]

[《探究 CSS 混合模式\\滤镜导致 CSS 3D 失效问题》][CSS _ CSS 3D]

转载于:https://www.cnblogs.com/wisewrong/p/11259490.html

[1059788-20190728144501686-1211366423.png]: /images/20230810/387a77a42fb14705aa68808a2dd921b6.png
[1059788-20190728144646851-727043448.png]: /images/20230810/eb5d96beb14c4f9bad85c6b712afd905.png
[CSS]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients
[CSS3 Gradient]: https://www.cnblogs.com/wisewrong/p/10752241.html
[1059788-20190728150440507-1886501899.png]: /images/20230810/ab58fdb56b58400eb8a83b3c7a184fd3.png
[-webkit-box-reflect]: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
[CSS 1]: https://mp.weixin.qq.com/s?__biz=MzAwNTM2ODYxMA==&mid=2650783133&idx=1&sn=764382754758b18fe5101ec25c771449&scene=21#wechat_redirect
[1059788-20190728152414109-289599193.png]: /images/20230810/ca91b5a221644a9fa265a8630419df97.png
[1059788-20190728152243542-1767600409.gif]: /images/20230810/6dd37be35d884bc7ac5d5e9fc9ef5801.png
[CodePen Demo -- CSS Checker Illusion_ By David Khourshid]: https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2Fdavidkpiano%2Fpen%2FLVzxPV
[box-shadow]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
[CSS 2]: https://juejin.im/post/5be1023951882516fd36a38e
[1059788-20190728153140052-1383008489.png]: /images/20230810/be6bbfadcfc04fc398ed81df0c0fb101.png
[1059788-20190728153341717-637351361.png]: /images/20230810/135cd741f35e42c78ac0ff244885f140.png
[clip-path]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
[CSS clip-path maker]: https://bennettfeely.com/clippy/
[CSS_CLIP-PATH]: https://smohan.net/blog/eutcdc
[1059788-20190728155945350-603868509.png]: /images/20230810/c997e3c46a4b4add8cff6e2f71e2c948.png
[CSS_CSS3 mask_masks]: https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/
[CSS3]: https://mp.weixin.qq.com/s?__biz=MzAwNTM2ODYxMA==&mid=2650783008&idx=1&sn=dfc0884d65c9c458be1a80ea9ba5fb1f&scene=19#wechat_redirect
[CSS3 _ background _ mask]: https://juejin.im/post/5ca75769e51d452be1237dfd
[1059788-20190728160537832-340238685.png]: /images/20230810/c3c6b437ebea45c3b8607cccfba994f8.png
[filter]: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
[CSS 3]: https://www.cnblogs.com/coco1s/p/7519460.html
[QQ _ - _ -]: https://www.zhihu.com/question/37231903/answer/139438769
[CSS3 filter]: https://github.com/justemit/coding-note/issues/18
[1059788-20190728162910894-654052559.png]: /images/20230810/fe7cc3afe13c4d11a368a21c189da63f.png
[CodePen Demo -- _ mix-blend-mode _ LOGO]: https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2FChokcoco%2Fpen%2FoQxQyw
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/blend-mode
[mix-blend-mode]: http://codehtml.cn/front-end-demo/#/mix-blend-mode
[CSS _ CSS 3D]: https://juejin.im/post/5c18959951882565a1574d5e