掘金网站（前端）

对于 web 技术在线资源收集，绝不手软！一个链接，就是一个新世界！开冲‍！1.Browser Default Styleshttps://browserdefaultstyles.com/可以在 Browser Default Styles 中查询 HTML 元素在每个浏览器下的默认样式；2.Clippyhttps://bennettfeely.com/clippy/可以在 Clippy 为你的图片作剪辑，并且生成对应的 css clip-path 属性；3.CSS keyframeshttps://keyframes.app/animate/CSS keyframes 可以帮助你创建 CSS 帧动画；4.Neumorphism.iohttps://neumorphism.io/#55b9f3Neumorphism.io 帮你创建新拟态的 UI 风格；5.CSS Cursorshttps://csscursor.info/CSS Cursors 让你的光标足够酷；6.CSS Grid Generatorhttps://cssgrid-generator.netlify.app/CSS Grid Generator，作用如其名，帮助创建 CSS Gird；7.Placeholder Image Generatorhttps://placeholderimage.dev/Placeholder Image Generator 帮助创建图片未加载出来的占位信息；8.Htmldomhttps://htmldom.dev/Htmldom：纯原生 JS 代码合集，帮助操作 DOM；9.HTML5 head elementshttps://htmlhead.dev/HTML5 head elements 是 head 标签设置最强指南，真滴强；10.Input Type Sandboxhttps://inputtypes.com/设置并校验 Input 框输入，Input Type Sandbox 各种类型都有，专精尖；11.Meta Tagshttps://metatags.io/Meta Tags 帮你自动导出流行社交网络（如Facebook、Twitter、Google…）的 Meta Tags 以供使用；12.Can I Includehttps://caninclude.glitch.me/Can I Include 帮你确定 HTML 元素之间是否可以嵌套；13.Key codeshttps://keycode.info/Key codes 帮你轻松找到键盘按键所对应的 keycodes 来设置事件监听；14.Color contrast checkerhttps://polypane.app/color-contrast/Color contrast checker 帮你检查网页设计中两种颜色之间的对比度；15.Git Command Explorerhttps://gitexplorer.com/Git Command Explorer 帮你充分了解和学习 Git 命令；16.Make thumbnailshttp://makethumbnails.com/#dropzoneMake thumbnails 帮你轻松创建图像缩略图；17.Can I Emailhttps://www.caniemail.com/Can I Email 帮你查看电子邮件中可支持哪些 HTML 和 CSS 属性；18.Trianglifyhttps://trianglify.io/Trianglify 帮你的网站创作出美丽的背景；19.CSS Layouthttps://csslayout.io/CSS Layout 收集了流行的 CSS 布局，帮你轻松选择合适的网站设计；20.FANCY-BORDER-RADIUShttps://9elements.github.io/fancy-border-radius/FANCY-BORDER-RADIUS 帮你通过使用 CSS BORDER-RADIUS 属性设置形状来设计对象；21.1lochttps://1loc.dev/1loc 是一个聚合解决方案网站，帮你解决 JS 编程中经常遇到的各类问题；22.Color Namerhttps://colornamer.netlify.app/Color Namer 让每一个颜色都有一个独特的名字；23.BrowserFramehttps://browserframe.com/BrowserFrame 给你的网站添加一个浏览器背景；24.CSS Scanhttps://getcssscan.com/css-box-shadow-examplesCSS Scan 收集了超多 box-shadow 效果网站；25.Faviconhttps://favicon.io/Favicon 帮你创建免费的 FavIcon；26.CSS Filterhttps://www.cssfilters.co/CSS Filter 将 CSS Filter 玩出花来；27.Simple CSS Media Query Generatorhttps://simplecss.eu/Simple CSS Media Query Generator 帮你轻松搞定媒体查询；28.Mix Fonthttps://www.mixfont.com/Mix Font 通过一种有趣且简单的方式来发现、创建新字体；29.Omatsurihttps://omatsuri.app/triangle-generatorOmatsuri 设计师工具集合网站，例如使用CSS创建三角形、创建网站光标显示样式、HTML符号等；30.Underline Generatorhttps://underline-generator.netlify.app/Underline Generator 帮你创建美丽的下划线；31.Checkboxes & Radios CSS Generatorhttps://bun.js.org/Checkboxes & Radios CSS Generator 创建 Checkboxes & Radios；32.Convert Images to Base64https://www.base64-image.de/Convert Images to Base64 将图片转为 base64 格式；33.Responsivelyhttps://responsively.app/Responsively 帮你查看多种设备下的网站效果；34.UI Design Dailyhttps://www.uidesigndaily.com/UI Design Daily：UI 设计聚合网；35.Devdocshttps://devdocs.io/Devdocs：开发文档聚合网；36.Shortcodehttps://shortcode.dev/javascript-cheatsheet#javascript-cheatsheetShortcode 帮你用简短的代码解决编程中的常见问题；37.Public-apishttps://public-apis.io/Public-apis 为你的网站提供免费的 API，接入免费数据；38.CSS Grid Layout Generatorhttps://css-grid-layout-generator.pw/CSS Grid Layout Generator 帮你用CSS快速构建复杂的网格系统；39.CSS Duotone Generatorhttps://cssduotone.com/CSS Duotone Generator 帮你设置图像的CSS属性，例如图像的距离、不透明度、模糊、颜色等；40.CSS3 Generatorhttp://css3generator.com/CSS3 Generator 帮你快速创建复杂的 CSS3 属性，例如长方体阴影、渐变、过渡效果等。此外，对于每个属性，还提供了不同浏览器支持的详细信息；41.Box Modelhttps://codepen.io/carolineartz/full/ogVXZjBox Model 帮你更直观的查web 对象填充设置、边距和边框属性等；42.Animated CSS Background Generatorhttps://wweb.dev/resources/animated-css-background-generator/Animated CSS Background Generator 帮你借用颜色创建动画背景。此外，还提供一些其它属性配置，如计数、大小、平均速度等；43.Web Code Toolshttps://webcode.tools/generators/cssWeb Code Tools ，通过输入属性值来设置CSS中的公共属性，并能直接预览效果；44.Enjoy CSShttps://enjoycss.com/Enjoy CSS 帮你设置样式，设置即预览，享受它吧~45.CSS Portalhttps://www.cssportal.com/css-generators.phpCSS Portal，是一个 CSS 各类生成器集合站点；46.CSS3 Generator OverDesignhttp://ds-overdesign.com/CSS3 Generator OverDesign 帮你设置web设计中的常用属性；47.HTML Table Generatorhttps://www.quackit.com/html/html_table_generator.cfmHTML Table Generator 帮你轻松设计网站表格；48.Making CSShttps://makingcss.com/Making CSS 是一个工具聚合网站，帮你轻松实现 CSS；49.CSS Masonry Generatorhttps://w3bits.com/tools/masonry-generator/CSS Masonry Generator 帮你实现可配置的图片瀑布流；50.Generator of CSS background patternshttps://online-free-tools.com/en/css_pattern_generator_backgroundGenerator of CSS background patterns 帮你轻松构建不同类型的网站背景；小结OK，以上便是本篇分享；请把收藏力拉满，拿走不谢！！撰文不易，点赞鼓励我是掘金安东尼： 一名人气前端技术博主（文章 100w+ 阅读量）终身写作者（INFP 写作人格）坚持与热爱（简书打卡 1000 日）陪你一起度过漫长技术岁月吧（以梦为马）觉得不错，点个赞吧（您的三连，我最大的动力 ）