美文网首页程序员Web前端之路工具癖
《Keylines》为网页元素添加随机描边颜色

《Keylines》为网页元素添加随机描边颜色

作者: zhaoolee | 来源:发表于2019-07-26 09:03 被阅读49次

Keylines是一款为网页dom元素, 添加随机颜色描边的扩展程序, 可以让前端工程师快速了解网页布局, 提升开发效率(随机颜色描边的想法蛮酷的~)

效果图:

image

使用方法gif:

image
  • Keylines的实现原理是为网页dom元素添加了outline属性

keylines扩展程序下载链接:

https://chrome.google.com/webstore/detail/keylines/akdpglnbllgdimcgmhknebpekooejiai

小结:

Keylines的实现原理非常简单, 但展示的效果却非常惊艳, 这应该归功于Keylines作者优秀的想法, 很多时候, 优秀的软件并不一定使用了很难掌握的技术, 而是包含了作者优秀的想法~

写在最后(我需要你的支持)

  • 本文属于谷粒-Chrome插件英雄榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/ChromeAppHeroes

  • 谷粒-Chrome插件英雄榜, 为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类, 如果你喜欢这个项目, 希望你能为本项目添加一颗 🌟星.

  • ChromeAppHeroes, Write a Chinese manual for the excellent Chrome plugin, let the Chrome plugin heroes benefit the human, If you like this project, I hope you can add a star 🌟 to this project.

相关文章

  • 《Keylines》为网页元素添加随机描边颜色

    Keylines是一款为网页dom元素, 添加随机颜色描边的扩展程序, 可以让前端工程师快速了解网页布局, 提升开...

  • label添加描边

    新建label类继承UILabel重写下面方法

  • D6 线性+单色填充icon

    图标分析 元素使用:单元素与双元素(时钟、问题和帮助)。 图标风格:描边+单色填充+部分浅色高光(图二) 描边形式...

  • canvas-05 描边样式

    影响描边样式的因素: strokeStyle:描边的颜色 ctx.strokeStyle='maroon'; li...

  • AI 软件入门 - 基本工具的使用

    在学习基本工具之前,我们先学习下填充和描边,打开AI新建画布,画一个矩形 画好矩形之后,我们可以给矩形添加颜色和描...

  • 字体描边像素颜色

    没空写文本,直接贴代码,看代码好了,不懂再m我!

  • 字体 font

    一、文字描边 -webkit-text-stroke:描边宽度 颜色;注意书写时必须加前缀 二、mask 遮罩 -...

  • React Native SVG描边动画

    stroke属性 stroke 定义描边颜色 strokeWidth 定义描边的宽度 创建虚线时候用到的属性: s...

  • 随机颜色 & 字符串转RGB

    给系统类 UIColor 添加分类。实现随机颜色和字符串转RGB功能。 随机颜色 使用 extension 关键字...

  • PS里描边

    一、双击图片--------变成图层 二、编辑-------描边------颜色“黑色”

网友评论

    本文标题:《Keylines》为网页元素添加随机描边颜色

    本文链接:https://www.haomeiwen.com/subject/deglrctx.html