README.md

希望这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。

目标是每天更新。

在线预览

Online Pages

Layout

CSS实现瀑布流布局（display: flex）

CSS实现瀑布流布局（column-count）

CSS实现瀑布流布局（display: grid）

多方案实现跨行或跨列布局

多种方案实现单列等宽，其他多列自适应均匀布局

多种方案实现多列等高布局

圣杯布局

圣杯布局（flex实现）

双飞翼布局

阴影(box-shadow、drop-shadow)

单侧投影

立体投影

文字立体投影

长阴影(线性渐变模拟)

线性渐变|阴影实现条纹立体阴影条纹字

使用 box-shadow 实现半透明遮罩

box-shadow 实现背景动画

box-shadow 模拟实现类似线性渐变背景动画

box-shadow 模拟霓虹氙灯文字效果

单标签借助 inset shdow 实现IE LOGO

借助 filter:drop-shadow ，单标签实现抖音 LOGO

Box-shadow 实现圆环进度条动画

使用box-shadow/渐变实现内切圆角

伪类/伪元素

使用:not()伪类实现弹窗背景元素模糊

使用:focus-within伪类实现纯 CSS Tab 切换

使用:placeholder-shown & :focus-within & :not()伪类实现表单填写效果

伪元素+border实现气泡对话框

滤镜(fliter)

使用 filter:blur 生成彩色阴影

使用 filter:blur | filter:constrast 生成特殊融合效果

使用 filter:blur | filter:constrast 生成火焰效果

使用 fliter:blur | filter:brightness | mix-blend-mode | background-blend-mode 生成特殊图片融合动画

边框(border)

活用 border-radius, 实现波浪动画

活用 border-radius, 实现波浪百分比图

border-radius 变换实现 loading 效果

背景/渐变(linear-gradient/radial-gradient/conic-gradient)

线性渐变模拟长阴影

线性渐变实现条纹字

重复径向渐变实现波浪边框

渐变实现优惠券波浪造型

使用box-shadow/渐变实现内切圆角

线性渐变实现内切直角

利用 线性渐变 实现下划线

使用background-attachment: fixed | filter: bulr() 实现毛玻璃效果

混合模式（mix-blend-mode/background-blend-mode)

mix-blend-mode 实现 loading 效果

mix-blend-mode 实现颜色叠加旋转动画

使用 mix-blend-mode 实现抖音 LOGO

使用background-blend-mode | mix-blend-mode 实现类抖音LOGO晕眩效果

使用 mix-blend-mode 实现图片任意颜色赋值技术

3D

使用 translateZ 实现滚动视差

借助 translate3d\perspective 实现 3D 视差效果

借助 translate3d\perspective 实现 3D 视差效果2

动画/过渡(transition/animation)

借助transition-delay实现按钮border动画效果

CSS实现曲线运动

SVG

使用 SVG 实现文字弧形排列

综合

retina屏下的1px线的实现