【譯】你不知道的 Chrome 除錯工具技巧第十一天：style editors continued（樣式編輯器後續）

本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。據作者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原作者所有。

作者在Twitter上推薦我們的中文翻譯啦,截圖在最後

譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，授權的記錄在這裡

正文

在馬上就要迎來假期的這 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;

當你把滑鼠放在樣式選擇器的選擇區域的最後時，你會看到幾個按鈕，它們可以讓你快速的使用 Color 和 Shadow 編輯器新增 CSS 屬性：

...開啟相應的編輯器：

今天的分享就到這裡~

慣例：如果你從這裡學到了一些新東西

→ 你可以點個贊再走嘛~
→ 關注我：Twitter：Tomek Sułkowski

其他此係列的文章，馬上就會翻譯出來，到時會貼出對應的連結在此處。

如果你對我的翻譯表示肯定，也可以關注我一波哦~ 順便我的開源專案，求一波 star→ 看這裡, 美麗的部落格系統