你知道Web版本的 Photoshop 都用了哪些CSS技术吗？

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/195747.html

1. 前言
2. Photoshop 旧版 Logo
3. body 元素
4. 几乎都是 Flexbox 布局
• 导航栏
• Context Bar
• 图层
5. 关于 CSS Grid 布局
• 新建文件弹窗
• 图层属性
• Drop-Shadow 输入框
• 菜单网格
6. 大量使用 CSS 变量
• 更改图层缩略图的大小
• Loading 进度条
• 图像控件
• 单选按钮
7. 当菜单处于活动状态时锁定页面
8. 混合模式菜单
9. 注释组件
• 我喜欢动态定位和颜色的 CSS 变量
• 使用 SVG 进行工程图标注
10. 对图层缩略图使用 Object-Fit: Contain
11. 最后

前言

几周前，Adobe 发布了一个 Web 版的 Photoshop，它是用 WebAssembly、Web 组件、P3 颜色等网络技术构建的。

Photoshop 是我 14 岁时学会的第一个专业设计应用程序。这是我成为设计师并最终成为前端开发人员的原因之一。正因为如此，我认为看看 CSS 是如何助力像 Photoshop 这样的大型应用开发会很有趣。

最后

文章到此就结束了，介绍了 Photoshop Web 版本使用的一些 CSS 技术。与国内常见的 CSS 技术相比，有许多不同之处，其中很多部分值得学习和借鉴。当然这只是其中的一部分，如果你感兴趣，可以查看他们的源代码来深入研究。

本文为译文，原文链接，点击这里查看

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/