{"id":15036954,"url":"https://github.com/l-hammer/you-need-to-know-css","last_synced_at":"2025-10-18T17:05:50.334Z","repository":{"id":37733294,"uuid":"112713457","full_name":"l-hammer/You-need-to-know-css","owner":"l-hammer","description":"💄CSS tricks for web developers~","archived":false,"fork":false,"pushed_at":"2024-07-28T04:37:15.000Z","size":5567,"stargazers_count":5298,"open_issues_count":53,"forks_count":607,"subscribers_count":89,"default_branch":"master","last_synced_at":"2024-10-29T15:39:11.532Z","etag":null,"topics":["css","css-animations","css-center","css-effects","css-experiment","css-flexbox","css-layout","css-properties","css-scrollbar","css-shadow-parts","css-shapes","css-snippets","css-transitions","css-tricks","css-variables","css3","cssnext","docsify","pseudo-elements"],"latest_commit_sha":null,"homepage":"https://lhammer.cn/You-need-to-know-css/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/l-hammer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/master/static/reward-code.png"}},"created_at":"2017-12-01T08:16:13.000Z","updated_at":"2024-10-25T16:10:00.000Z","dependencies_parsed_at":"2024-11-08T20:33:05.863Z","dependency_job_id":null,"html_url":"https://github.com/l-hammer/You-need-to-know-css","commit_stats":{"total_commits":227,"total_committers":12,"mean_commits":"18.916666666666668","dds":"0.29955947136563876","last_synced_commit":"a278733e350003e12e17e46943629114d47e74d8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/l-hammer%2FYou-need-to-know-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/l-hammer%2FYou-need-to-know-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/l-hammer%2FYou-need-to-know-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/l-hammer%2FYou-need-to-know-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/l-hammer","download_url":"https://codeload.github.com/l-hammer/You-need-to-know-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247968368,"owners_count":21025823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-animations","css-center","css-effects","css-experiment","css-flexbox","css-layout","css-properties","css-scrollbar","css-shadow-parts","css-shapes","css-snippets","css-transitions","css-tricks","css-variables","css3","cssnext","docsify","pseudo-elements"],"created_at":"2024-09-24T20:32:51.268Z","updated_at":"2025-10-18T17:05:50.260Z","avatar_url":"https://github.com/l-hammer.png","language":"CSS","funding_links":["https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/master/static/reward-code.png","https://opencollective.com/You-need-to-know-css"],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://lhammer.cn/You-need-to-know-css/#/\"\u003e\n    \u003cimg src=\"./static/logo.png\" width=\"152\"\u003e\n  \u003c/a\u003e\n  \u003ch3 align=\"center\"\u003eYou-need-to-know-css\u003c/h3\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://gitter.im/You-need-to-know-css/Lobby\"\u003e \u003cimg src=\"https://badges.gitter.im/You-need-to-know-css/Lobby.svg\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/l-hammer/You-need-to-know-css/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-Anti%20996-blue.svg\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://juejin.im/post/5aab4f985188255582521c57\"\u003e\u003cimg src=\"https://img.shields.io/badge/%E6%8E%98%E9%87%91-1.2k%20likes-brightgreen.svg\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://codeclimate.com/github/l-hammer/You-need-to-know-css/maintainability\"\u003e\u003cimg src=\"https://api.codeclimate.com/v1/badges/dfba02247f296387a1a7/maintainability\" /\u003e\u003c/a\u003e\n    \u003ca href=\"http://hits.dwyl.io/l-hammer/You-need-to-know-css\" alt=\"hit count\"\u003e\u003cimg src=\"http://hits.dwyl.io/l-hammer/You-need-to-know-css.svg\" /\u003e\u003c/a\u003e \n    \u003ca href=\"https://github.com/l-hammer/You-need-to-know-css\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/l-hammer/You-need-to-know-css.svg?style=social\"\u003e\u003c/a\u003e\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n    CSS tricks web developers need to know\u003cbr\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\n## View online\n\n🌏 [You-need-to-know-css](https://lhammer.cn/You-need-to-know-css/#/)\n\n\n## Quick start\n\nSeveral quick start options are available:\n\n- Clone the repo: `https://github.com/l-hammer/You-need-to-know-css.git`\n- Install docsify with [docsify](https://docsify.js.org/#/): `npm install docsify-cli -g (or yarn global add docsify-cli)`\n- Development run `docsify serve`\n- Open `http://localhost:3000` in your browser.\n\n\n## What's included\n\n| [![translucent-borders](https://img.shields.io/badge/translucent%20borders-%E5%8D%8A%E9%80%8F%E6%98%8E%E8%BE%B9%E6%A1%86-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/translucent-borders) | [![multiple-borders](https://img.shields.io/badge/multiple%20borders-%E5%A4%9A%E9%87%8D%E8%BE%B9%E6%A1%86-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/multiple-borders) | [![inner-rounding](https://img.shields.io/badge/inner%20rounding-%E8%BE%B9%E6%A1%86%E5%86%85%E5%9C%86%E8%A7%92-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/inner-rounding)|\n|:--|:--|:--|\n| [![background-position](https://img.shields.io/badge/background%20position-%E8%83%8C%E6%99%AF%E5%AE%9A%E4%BD%8D-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/extended-bg-position) | [![stripes-background](https://img.shields.io/badge/stripes%20background-%E6%9D%A1%E7%BA%B9%E8%83%8C%E6%99%AF-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/stripes-background) | [![ellipse](https://img.shields.io/badge/ellipse-%E5%9C%86%2F%E6%A4%AD%E5%9C%86-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/ellipse) | \n|[![parallelogram](https://img.shields.io/badge/parallelogram-%E5%B9%B3%E8%A1%8C%E5%9B%9B%E8%BE%B9%E5%BD%A2-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/parallelogram) | [![bevel-corners](https://img.shields.io/badge/bevel%20corners-%E5%88%87%E8%A7%92%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/bevel-corners) | [![pie-chart](https://img.shields.io/badge/pie%20chart-%E7%AE%80%E6%98%93%E9%A5%BC%E5%9B%BE-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/pie-chart) |\n|[![polygon](https://img.shields.io/badge/polygon-%E5%85%B6%E4%BB%96%E5%A4%9A%E8%BE%B9%E5%BD%A2-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/polygon) | [![single-projection](https://img.shields.io/badge/single%20projection-%E5%B8%B8%E8%A7%81%E6%8A%95%E5%BD%B1-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/single-projection) | [![不规则投影](https://img.shields.io/badge/irregular%20projection-%E4%B8%8D%E8%A7%84%E5%88%99%E6%8A%95%E5%BD%B1-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/irregular-projection) |\n|[![毛玻璃效果](https://img.shields.io/badge/frosted%20glass-%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/frosted-glass) | [![文本行斑马条纹](https://img.shields.io/badge/zebra%20stripes-%E6%96%87%E6%9C%AC%E8%A1%8C%E6%96%91%E9%A9%AC%E6%9D%A1%E7%BA%B9-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/zebra-stripes) | [![常见的文字效果](https://img.shields.io/badge/text%20effects-%E5%B8%B8%E8%A7%81%E7%9A%84%E6%96%87%E5%AD%97%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/text-effects) |\n|[![环形文字](https://img.shields.io/badge/circular%20text-%E7%8E%AF%E5%BD%A2%E6%96%87%E5%AD%97-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/circular-text) | [![选择合适的鼠标光标](https://img.shields.io/badge/mouse%20cursor-%E9%80%89%E6%8B%A9%E5%90%88%E9%80%82%E7%9A%84%E9%BC%A0%E6%A0%87%E5%85%89%E6%A0%87-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/mouse-cursor) | [![扩大可点击区域](https://img.shields.io/badge/extend%20hit%20area-%E6%89%A9%E5%A4%A7%E5%8F%AF%E7%82%B9%E5%87%BB%E5%8C%BA%E5%9F%9F-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/extend-hit-area) |\n|[![自定义复选框](https://img.shields.io/badge/custom%20checkbox-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%8D%E9%80%89%E6%A1%86-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/custom-checkbox) | [![自定义单选框](https://img.shields.io/badge/custom%20radio-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8D%95%E9%80%89%E6%A1%86-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/custom-radio) | [![输入框完美居中](https://img.shields.io/badge/input%20align-%E8%BE%93%E5%85%A5%E6%A1%86%E5%AE%8C%E7%BE%8E%E5%B1%85%E4%B8%AD-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/input-align) |\n|[![通过阴影弱化背景](https://img.shields.io/badge/shadow%20weaken%20background-%E9%80%9A%E8%BF%87%E9%98%B4%E5%BD%B1%E5%BC%B1%E5%8C%96%E8%83%8C%E6%99%AF-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/shadow-weaken-background) | [![通过模糊弱化背景](https://img.shields.io/badge/blurry%20weaken%20background-%E9%80%9A%E8%BF%87%E6%A8%A1%E7%B3%8A%E5%BC%B1%E5%8C%96%E8%83%8C%E6%99%AF-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/blurry-weaken-background) | [![交互式图片对比控件](https://img.shields.io/badge/image%20slider-%E4%BA%A4%E4%BA%92%E5%BC%8F%E5%9B%BE%E7%89%87%E5%AF%B9%E6%AF%94%E6%8E%A7%E4%BB%B6-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/image-slider) |\n|[![全背景下等宽内容居中](https://img.shields.io/badge/fluid%20fixed-%E5%85%A8%E8%83%8C%E6%99%AF%E4%B8%8B%E7%AD%89%E5%AE%BD%E5%86%85%E5%AE%B9%E5%B1%85%E4%B8%AD-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/fluid-fixed) | [![绝对底部](https://img.shields.io/badge/sticky%20footer-%E7%BB%9D%E5%AF%B9%E5%BA%95%E9%83%A8-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/sticky-footer) | [![水平垂直居中](https://img.shields.io/badge/center-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/centering-known) |\n|[![弹性过度](https://img.shields.io/badge/elastic-%E5%BC%B9%E6%80%A7%E8%BF%87%E5%BA%A6-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/elastic) | [![闪烁效果](https://img.shields.io/badge/blink-%E9%97%AA%E7%83%81%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/blink) | [![打字效果](https://img.shields.io/badge/typing-%E6%89%93%E5%AD%97%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/typing) |\n|[![抖动效果](https://img.shields.io/badge/shake-%E6%8A%96%E5%8A%A8%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/shake) | [![无缝平滑效果](https://img.shields.io/badge/smooth-%E6%97%A0%E7%BC%9D%E5%B9%B3%E6%BB%91%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/smooth) | [![延轨迹平滑效果](https://img.shields.io/badge/circular%20smooth-%E5%BB%B6%E8%BD%A8%E8%BF%B9%E5%B9%B3%E6%BB%91%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/circular-smooth) |\n|[![自定义文字下划线](https://img.shields.io/badge/custom%20text%20underline-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%87%E5%AD%97%E4%B8%8B%E5%88%92%E7%BA%BF-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/text-underline) | [![提示气泡](https://img.shields.io/badge/poptip-%E6%8F%90%E7%A4%BA%E6%B0%94%E6%B3%A1-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/poptip) | [![自定义滚动条](https://img.shields.io/badge/custom%20scrollbar-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%BB%9A%E5%8A%A8%E6%9D%A1-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/scrollbar) |\n|[![圣杯布局](https://img.shields.io/badge/holy%20grail%20layout-%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/holy-grail-layout) | [![双飞翼布局](https://img.shields.io/badge/double%20wing%20layout-%E5%8F%8C%E9%A3%9E%E7%BF%BC%E5%B8%83%E5%B1%80-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/double-wing-layout) | [![类订单布局](https://img.shields.io/badge/class%20order%20layout-%E7%B1%BB%E8%AE%A2%E5%8D%95%E5%B8%83%E5%B1%80-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/class-order-layout) |\n|[![Flex 布局](https://img.shields.io/badge/flexbox%20layout-Flex%E5%B8%83%E5%B1%80-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/flexbox-layout) | [![1px 线/边](https://img.shields.io/badge/one%20pixel%20line-1px%20%E7%BA%BF%2F%E8%BE%B9-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/one-pixel-line) | [![弹跳效果](https://img.shields.io/badge/bounce-%E5%BC%B9%E8%B7%B3%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/bounce) |\n|[![插入换行](https://img.shields.io/badge/line%20breaks-%E6%8F%92%E5%85%A5%E6%8D%A2%E8%A1%8C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/line-breaks) | [![自定义变量](https://img.shields.io/badge/custom%20variables-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/custom-variables) | [![有趣的项目](https://img.shields.io/badge/interesting-%E6%9C%89%E8%B6%A3%E7%9A%84%E9%A1%B9%E7%9B%AE-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/interesting-usage) |\n\n\n## Contributing ![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?longCache=true\u0026style=flat-square)\n\n- :fork_and_knife:Fork it!\n- :twisted_rightwards_arrows:Create your branch: `git checkout -b new-branch`\n- :wrench:Make your changes\n- :memo:Commit your changes: `git commit -am 'Add some feature'`\n- :rocket:Push to the branch: `git push origin new-branch`\n- :tada:Submit a pull request\n\nor submit an [issue](https://github.com/l-hammer/You-need-to-know-css/issues) - any helpful suggestions are welcomed. :stuck_out_tongue_winking_eye:\n\n------\n\nThis project exists thanks to all the people who contribute. \n\u003ca href=\"https://github.com/l-hammer/You-need-to-know-css/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/You-need-to-know-css/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n## Donate ![donate](https://img.shields.io/badge/%E2%98%95-Buy%20Me%20A%20Coffee-%23be4141.svg?style=flat-square\u0026colorB=00A862)\n\nIf you find this project useful, you can buy me a coffee ☕, Thank you! 🙏🏻 🙏 🙏🏿\n\n\u003cimg src=\"./static/reward-code.png\" width=\"280\"\u003e \u003cbr\u003e\u003cbr\u003e\n\nIf you provide your github in the message, it will show up here with a link to your github.\n\n\u003ca href=\"https://github.com/fqs617\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/23302051?s=460\u0026v=4\" width=\"29\" style=\"border-radius: 50%\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ElivesHuangGit\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/36831410?s=460\u0026v=4\" width=\"29\" style=\"border-radius: 50%\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/StaminaWang\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/19159159?s=460\u0026v=4\" width=\"29\" style=\"border-radius: 50%\"\u003e\u003c/a\u003e\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/You-need-to-know-css#backer)]\n\n\u003ca href=\"https://opencollective.com/You-need-to-know-css#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/You-need-to-know-css/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/You-need-to-know-css#sponsor)]\n\n\u003ca href=\"https://opencollective.com/You-need-to-know-css/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/You-need-to-know-css/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/You-need-to-know-css/sponsor/1/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/You-need-to-know-css/sponsor/1/avatar.svg\"\u003e\u003c/a\u003e\n\n\n## license\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fl-hammer%2FYou-need-to-know-css.svg?type=small)](https://app.fossa.io/projects/git%2Bgithub.com%2Fl-hammer%2FYou-need-to-know-css?ref=badge_small)\n\n[996ICU](https://github.com/l-hammer/You-need-to-know-css/blob/master/LICENSE) © 2017-present, LHammer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fl-hammer%2Fyou-need-to-know-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fl-hammer%2Fyou-need-to-know-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fl-hammer%2Fyou-need-to-know-css/lists"}