# You-need-to-know-css

**Repository Path**: lhammer/You-need-to-know-css

## Basic Information

- **Project Name**: You-need-to-know-css
- **Description**: CSS tricks web developers need to know~
- **Primary Language**: CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://lhammer.cn/You-need-to-know-css/#/
- **GVP Project**: No

## Statistics

- **Stars**: 36
- **Forks**: 19
- **Created**: 2018-04-09
- **Last Updated**: 2023-12-03

## Categories & Tags

**Categories**: ebooks-manual

**Tags**: None

## README


<p align="center">
    <a href="https://lhammer.cn/You-need-to-know-css/#/">
        <img src="./static/logo.png" width="152">
    </a>
    <h3 align="center">You-need-to-know-css</h3>
    <p align="center">
        <a href="https://gitter.im/You-need-to-know-css/Lobby"> <img src="https://badges.gitter.im/You-need-to-know-css/Lobby.svg"></a>
        <a href="https://github.com/l-hammer/You-need-to-know-css/blob/master/LICENSE"><img src="https://img.shields.io/github/license/l-hammer/You-need-to-know-css.svg??colorB=brightgreen"></a>
        <a href="https://juejin.im/post/5aab4f985188255582521c57"><img src="https://img.shields.io/badge/%E6%8E%98%E9%87%91-1.2k%20likes-brightgreen.svg"></a>
        <a href="https://codeclimate.com/github/l-hammer/You-need-to-know-css/maintainability"><img src="https://api.codeclimate.com/v1/badges/dfba02247f296387a1a7/maintainability" /></a>
        <!-- <a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/You-need-to-know-css/backers/badge.svg" /></a> 
        <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/You-need-to-know-css/sponsors/badge.svg" /></a> -->
        <a href="https://github.com/l-hammer/You-need-to-know-css"><img src="https://img.shields.io/github/stars/l-hammer/You-need-to-know-css.svg?style=social"></a>
    </p>
    <p align="center">
        CSS tricks web developers need to know<br>
    </p>
</p>


## View online

🌏 [You-need-to-know-css](https://lhammer.cn/You-need-to-know-css/#/)


## Quick start

Several quick start options are available:

- Clone the repo: `https://github.com/l-hammer/You-need-to-know-css.git`
- Install docsify with [docsify](https://docsify.js.org/#/): `npm install docsify-cli -g (or yarn global add docsify-cli)`
- Development run `docsify serve`
- Open `http://localhost:3000` in your browser.


## What's included

| [![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)|
|:--|:--|:--|
| [![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) | 
|[![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) |
|[![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) |
|[![毛玻璃效果](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) |
|[![环形文字](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) |
|[![自定义复选框](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) |
|[![通过阴影弱化背景](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) |
|[![全背景下等宽内容居中](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) |
|[![弹性过度](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) |
|[![抖动效果](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) |
|[![自定义文字下划线](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) |
|[![圣杯布局](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) |
|[![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) |
|[![插入换行](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) |


## Contributing ![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?longCache=true&style=flat-square)

- :fork_and_knife:Fork it!
- :twisted_rightwards_arrows:Create your branch: `git checkout -b new-branch`
- :wrench:Make your changes
- :memo:Commit your changes: `git commit -am 'Add some feature'`
- :rocket:Push to the branch: `git push origin new-branch`
- :tada:Submit a pull request

or submit an [issue](https://github.com/l-hammer/You-need-to-know-css/issues) - any helpful suggestions are welcomed. :stuck_out_tongue_winking_eye:

## Donate ![donate](https://img.shields.io/badge/%E2%98%95-Buy%20Me%20A%20Coffee-%23be4141.svg?style=flat-square&colorB=00A862)

If you find this project useful, you can buy me a coffee ☕, Thank you! 🙏🏻 🙏 🙏🏿

<img src="./static/reward-code.png" width="280"> <br><br>

If you provide your github in the message, it will show up here with a link to your github.

<a href="https://github.com/fqs617" target="_blank"><img src="https://avatars3.githubusercontent.com/u/23302051?s=460&v=4" width="29" style="border-radius: 50%"></a>
<a href="https://github.com/ElivesHuangGit" target="_blank"><img src="https://avatars0.githubusercontent.com/u/36831410?s=460&v=4" width="29" style="border-radius: 50%"></a>
<a href="https://github.com/StaminaWang" target="_blank"><img src="https://avatars1.githubusercontent.com/u/19159159?s=460&v=4" width="29" style="border-radius: 50%"></a>

## Contributors

This project exists thanks to all the people who contribute. 
<a href="https://github.com/l-hammer/You-need-to-know-css/graphs/contributors"><img src="https://opencollective.com/You-need-to-know-css/contributors.svg?width=890&button=false" /></a>


## Backers

Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/You-need-to-know-css#backer)]

<a href="https://opencollective.com/You-need-to-know-css#backers" target="_blank"><img src="https://opencollective.com/You-need-to-know-css/backers.svg?width=890"></a>


## Sponsors

Support 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)]

<a href="https://opencollective.com/You-need-to-know-css/sponsor/0/website" target="_blank"><img src="https://opencollective.com/You-need-to-know-css/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/You-need-to-know-css/sponsor/1/website" target="_blank"><img src="https://opencollective.com/You-need-to-know-css/sponsor/1/avatar.svg"></a>


## license

[![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)

[MIT](https://github.com/l-hammer/You-need-to-know-css/blob/master/LICENSE) © 2017-present, LHammer