You-need-to-know-css（Web 前端开发者的 CSS 技巧）

Barry 把自己的收获和工作中常用的一些CSS小样式整理到这个 git 仓库。其中针对我们常见的网页设计难题提供实用又优雅的解决方案。

包括的 CSS Tricks

2022-11-17 20:15:52 记录

边框与背景

• 半透明边框
• 多重边框
• 边框内圆角
• 背景定位
• 条纹背景
• 1px 线/边

常见形状

• 圆与椭圆
• parallel四边形
• 切角效果
• 简易饼图
• 提示气泡
• 其他多边形

视觉效果

• 常见投影
• 不规则投影
• 毛玻璃效果
• 斑马条纹
• 文字特效
• 文本截断
• 环形文字

用户体验

• 选择合适的鼠标光标
• 扩大可点击区域
• 自定义复选框
• 自定义单选框
• 自定义开关选择器
• 输入框完美居中
• 通过阴影弱化背景

结构布局

• 全背景等宽内容居中
• 绝对底部
• 水平垂直居中
• 圣杯布局
• 双飞翼布局
• 类订单布局
• Flex布局

动画过渡

• 弹跳效果
• 弹性过度
• 闪烁效果
• 打字效果
• 抖动效果
• 无缝平滑效果
• 延轨迹平滑效果

其他

• 常用片段
• 自定义变量
• 有趣的项目