Chrome DevTools 之颜色提取神器 Eye Dropper

xmwu 4年前

来自: http://chinagdg.org/2016/02/chrome-devtools-eye-dropper/

想立即获取页面中某个元素的颜色?其实不需要任何第三方工具或 Chrome 扩展,Chrome 自带的 Eye Dropper 就够了。Web 开发者使用 Chrome 元素审查(Elements Inspect)的时候会看到该元素所应用的 CSS 样式,其中表示 CSS 颜色样式的旁边有一个小方块,点击这个小方块就会弹出颜色提取器 Eye Dropper 。

在弹出 Eye Dropper 的时候,你不仅仅可以直接用它设置颜色,你还可以把鼠标移到网页中,这时 Eye Dropper 就会实时显示当前元素的颜色,点击则立即将当前元素颜色应用到该 CSS 的颜色设置中,如果不合适可以按 ESC 取消。

顺便说一下,按住 Shift 的同时用鼠标点击这个小方块可以在各种 CSS 颜色单位之间前后,如 RGB 和 HSL 。

作者:韩国恺。本系列文章以 Addy & Matt 的系列视频  Totally Tooling Tips 的内容为基础重新整理而成,主要介绍一些(前端)开发者喜欢的工具和技巧。

Post Views: 1

除非特别声明,此文章内容采用 知识共享署名 3.0 许可,代码示例采用 Apache 2.0 许可。更多细节请查看我们的 服务条款