# You-need-to-know-css

**Repository Path**: ice-team/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://l-hammer.github.io/You-need-to-know-css/#/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 19
- **Created**: 2018-04-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


<p align="center">
    <a href="https://l-hammer.github.io/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://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://l-hammer.github.io/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/#/): `cd You-need-to-know-css && npm install docsify-cli -g`
- 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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/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://l-hammer.github.io/You-need-to-know-css/#/class-order-layout) |


## Contributing

- :fork_and_knife:Fork it!
- :wrench:Create your branch: `git checkout -b new-branch`
- 🏗 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:

## 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) © 2018 LHammer