# css-magic

**Repository Path**: michaelchou/css-magic

## Basic Information

- **Project Name**: css-magic
- **Description**: 使用 CSS 伪类和伪元素的 61 种方法
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-07-16
- **Last Updated**: 2022-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CSS 魔法类

使用 CSS 伪类和伪元素的 61 种方法。

访问网站 https://catouse.github.io/css-magic/ 了解更多。

![Magic Header](https://github.com/Catouse/css-magic/raw/master/img/css-magic.png)

### 简单

 * [链接](https://catouse.github.io/css-magic/#links)
 * [:root](https://catouse.github.io/css-magic/#root)
 * [首字下沉](https://catouse.github.io/css-magic/#drop-cap)
 * [首行加粗](https://catouse.github.io/css-magic/#bold-first-line)
 * [表单输入框聚焦](https://catouse.github.io/css-magic/#focus-input)
 * [图像缩放效果](https://catouse.github.io/css-magic/#image-scale)
 * [背景翻转效果](https://catouse.github.io/css-magic/#image-flip)
 * [修正边框](https://catouse.github.io/css-magic/#fix-border)
 * [表格隔行变色](https://catouse.github.io/css-magic/#table-striped)
 * [选中文本外观](https://catouse.github.io/css-magic/#selection-style)
 * [禁用控件外观](https://catouse.github.io/css-magic/#disabled-style)

### 高级

 * [隐藏空内容](https://catouse.github.io/css-magic/#hide-empty-content)
 * [处理空链接](https://catouse.github.io/css-magic/#show-empty-links)
 * [选中表单控件（不包括按钮）](https://catouse.github.io/css-magic/#select-inputs)
 * [按钮切换](https://catouse.github.io/css-magic/#toggle-button)
 * [下拉菜单](https://catouse.github.io/css-magic/#dropdown-menu)
 * [三角形](https://catouse.github.io/css-magic/#triangle)
 * [下拉菜单三角形图标](https://catouse.github.io/css-magic/#dropdown-icon)
 * [会话箭头](https://catouse.github.io/css-magic/#chat-arrow)
 * [带边框的会话三角形](https://catouse.github.io/css-magic/#chat-arrow-with-border)
 * [角标](https://catouse.github.io/css-magic/#corner-label)
 * [箭头形状](https://catouse.github.io/css-magic/#arrow-shape)
 * [切角遮挡](https://catouse.github.io/css-magic/#corner-tape)
 * [清除浮动](https://catouse.github.io/css-magic/#clearfix)
 * [纯 CSS 实现工具提示](https://catouse.github.io/css-magic/#css-tooltip)
 * [字体图标](https://catouse.github.io/css-magic/#font-icons)
 * [Sprite 图标](https://catouse.github.io/css-magic/#sprite-icons)
 * [按钮交互外观](https://catouse.github.io/css-magic/#button-skin)
 * [不规则形状](https://catouse.github.io/css-magic/#css-shapes)
 * [增加点击区域](https://catouse.github.io/css-magic/#expand-hit-area)
 * [绘制 Logo](https://catouse.github.io/css-magic/#css-logo)
 * [绘制图标](https://catouse.github.io/css-magic/#css-icons)
 * [绘制图形](https://catouse.github.io/css-magic/#css-images)
 * [CSS loading 动画](https://catouse.github.io/css-magic/#css-loading-spinners)
 * [环形进度条](https://catouse.github.io/css-magic/#circle-progress-bar)
 * [面包屑导航](https://catouse.github.io/css-magic/#breadcumb)
 * [行内逗号分割列表](https://catouse.github.io/css-magic/#comma-list)
 * [右上角徽标](https://catouse.github.io/css-magic/#corner-badge)
 * [聚焦内容](https://catouse.github.io/css-magic/#highlight-content)
 * [遮罩效果](https://catouse.github.io/css-magic/#css-backdrop)
 * [不规则阴影](https://catouse.github.io/css-magic/#irregular-shadow)
 * [顶层内阴影](https://catouse.github.io/css-magic/#top-shadow)
 * [自动隐藏 dock 栏](https://catouse.github.io/css-magic/#auto-dock-bar)
 * [TOC 内容聚焦](https://catouse.github.io/css-magic/#toc-highlight)

### 专家

 * [自适应正方形](https://catouse.github.io/css-magic/#responsive-square)
 * [等比例自适应媒体内容](https://catouse.github.io/css-magic/#responsive-media)
 * [翻转卡片](https://catouse.github.io/css-magic/#flip-card)
 * [占位标签输入框](https://catouse.github.io/css-magic/#md-input)
 * [文件上传控件外观](https://catouse.github.io/css-magic/#file-input-control)
 * [单选框和复选框外观](https://catouse.github.io/css-magic/#ratio-and-checkbox)
 * [开关](https://catouse.github.io/css-magic/#switch)
 * [重置单选和复选外观](https://catouse.github.io/css-magic/#checkbox-and-ratio-skin)
 * [纯 CSS 实现标签页](https://catouse.github.io/css-magic/#css-tabs)
 * [纯 CSS 实现折叠面板](https://catouse.github.io/css-magic/#css-collapse-panel)
 * [纯 CSS 实现轮播](https://catouse.github.io/css-magic/#css-carousel)
 * [纯 CSS 实现对话框](https://catouse.github.io/css-magic/#css-modal)
 * [纯 CSS 实现树形菜单](https://catouse.github.io/css-magic/#css-treeview)