【译】你不知道的 Chrome 调试工具技巧第十一天：style editors continued（样式编辑器后续）

本文是做者 Tomek Sułkowski 发布在 medium 上的一个系列。据做者透露一共有 24 篇，一直更新到 12 月 24 日
版权归原做者全部。
vue

做者在Twitter上推荐咱们的中文翻译啦,截图在最后
git

译者在翻译前已经和做者沟通获得了翻译整个系列的受权。
为了避免影响你们阅读，受权的记录在这里
github

正文

在立刻就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，关于如何更加有意思的使用开发工具，昨天咱们和 custom formatters 玩得很开心，今天咱们进行一些视觉操做异步

听起来很不吉利 (译者注：阴影哪里不吉利了！) ，可是它只是一个小部件而已，就像咱们前几天聊过的 color picker 同样，可是它更加简单。能够经过在 Style 面板中点击靠近 box-shadow 属性或 text-shadow属性的阴影方形符号来打开它：编辑器

也被称为 Cubic bezier(贝塞尔) 编辑器。贝塞尔曲线是一串用来定义 CSS 的动画速度在整个动画过程当中如何变化的魔法数值。咱们将其定义为 transition-timing-function 或者 animation-timing-function CSS 属性。函数

就像以前说的 Color picker 和 Shadow editor 同样直接点击咱们刚刚提到的属性(或者他们的简写形式：trasition, animation - 请注意：若是 timing 函数的值没有设置在这个简写的形式中，这个符号不会显示出来)边上的曲线符号：工具

顺带说一句，若是你没有试过 3D 动画，那很简单：直接在容器元素中设置一个 perspective 属性。在这种状况下，我在 body 元素中设置了 perspective: 200px;post

当你把鼠标放在样式选择器的选择区域的最后时，你会看到几个按钮，它们可让你快速的使用 Color 和 Shadow 编辑器添加 CSS 属性：开发工具

...打开相应的编辑器：动画

今天的分享就到这里~

惯例：若是你从这里学到了一些新东西

→ 你能够点个赞再走嘛~
→ 关注我：Twitter：Tomek Sułkowski

其余此系列的文章，立刻就会翻译出来，到时会贴出对应的连接在此处。

若是你对个人翻译表示确定，也能够关注我一波哦~ 顺便个人开源项目，求一波 star→ 看这里, 美丽的博客系统