🌙 CSS揭秘学习笔记
🌙 一、序言
🌙 1.工具函数
原文：
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
2
3
4
5
ES6：
function $$(selector, context=document) {
if(!context.querySelectorAll) throw new Error(`${context} does not have 'querySelectorAll' methods in its prototype`);
return Array.from(context.querySelectorAll(selector));
}
2
3
4
🌙 2.规范文档
+ CSS 背景与边框 (opens new window)
+ 可缩放矢量图形（SVG） (opens new window)
+ CSS 层叠与继承 (opens new window)
+ CSS 背景与边框 (opens new window)
+ CSS 值与单位 (opens new window)
+ CSS 文本排版 (opens new window)
+ CSS 文本装饰效果 (opens new window)
+ CSS 基本 UI 特性 (opens new window)
+ CSS 伸缩盒布局 (opens new window)
+ CSS 网格布局 (opens new window)
🌙 二、背景与边框
🌙 1.半透明边框
See the Pen CSS3-半透明边框 by Keekuun (@keekuun) on CodePen.
🌙 2.多重边框
See the Pen CSS3-多重边框 by Keekuun (@keekuun) on CodePen.
🌙 3.背景定位
See the Pen CSS3-背景定位 by Keekuun (@keekuun) on CodePen.
🌙 4.边框内圆角
See the Pen CSS3-边框内圆角 by Keekuun (@keekuun) on CodePen.
🌙 5.条纹背景
See the Pen CSS3-条纹背景 by Keekuun (@keekuun) on CodePen.
🌙 6.网格背景
See the Pen CSS3-网格背景 by Keekuun (@keekuun) on CodePen.
https://bennettfeely.com/gradients/
🌙 7.伪随机背景
See the Pen CSS3-伪随机背景 by Keekuun (@keekuun) on CodePen.
🌙 8.图像边框
See the Pen CSS3-图像边框 by Keekuun (@keekuun) on CodePen.
🌙 三、各种形状
🌙 1.自适应椭圆
See the Pen CSS3-自适应椭圆 by Keekuun (@keekuun) on CodePen.
🌙 2.平行四边形
See the Pen CSS3-平行四边形 by Keekuun (@keekuun) on CodePen.
🌙 3.菱形图片
See the Pen CSS3-菱形图片 by Keekuun (@keekuun) on CodePen.
🌙 4.切角效果
See the Pen CSS3-切角效果 by Keekuun (@keekuun) on CodePen.
🌙 5.梯形标签页
See the Pen CSS3-梯形标签页 by Keekuun (@keekuun) on CodePen.
🌙 6.简单的饼图
See the Pen CSS3-简单的饼图 by Keekuun (@keekuun) on CodePen.
SVG：
See the Pen CSS3-简单的饼图（SVG） by Keekuun (@keekuun) on CodePen.
🌙 四、视觉效果
🌙 1. 单侧投影
See the Pen CSS3-单侧投影 by Keekuun (@keekuun) on CodePen.
🌙 2.不规则投影（滤镜）
See the Pen CSS3-不规则投影（滤镜） by Keekuun (@keekuun) on CodePen.
🌙 3.染色效果
滤镜实现：
See the Pen CSS3-染色效果（滤镜） by Keekuun (@keekuun) on CodePen.
混合模式实现
See the Pen CSS3-染色效果（混合模式） by Keekuun (@keekuun) on CodePen.
🌙 4.毛玻璃效果（filter：blur）
See the Pen CSS3-毛玻璃效果(filter:blur) by Keekuun (@keekuun) on CodePen.
🌙 5.折角效果
See the Pen CSS3-折角效果 by Keekuun (@keekuun) on CodePen.
🌙 五、字体排版
🌙 1.连字符断行
See the Pen CSS3-连字符断行 by Keekuun (@keekuun) on CodePen.
🌙 2. 插入换行
See the Pen CSS3-插入换行 by Keekuun (@keekuun) on CodePen.
🌙 3.文本行的斑马条纹
See the Pen CSS3-文本行的斑马条纹 by Keekuun (@keekuun) on CodePen.
🌙 4.调整tab的宽度
See the Pen CSS3-调整Tab的宽度 by Keekuun (@keekuun) on CodePen.
🌙 5.连字
See the Pen CSS3-连字 by Keekuun (@keekuun) on CodePen.
🌙 6.华丽的&符号
See the Pen CSS3-华丽的&符号 by Keekuun (@keekuun) on CodePen.
🌙 7.自定义下划线
See the Pen CSS3-自定义下划线 by Keekuun (@keekuun) on CodePen.
🌙 8.现实中的文字效果
See the Pen CSS3-现实中的文字效果 by Keekuun (@keekuun) on CodePen.
🌙 9.环形文字
See the Pen CSS3-环形文字 by Keekuun (@keekuun) on CodePen.
🌙 六、用户体验
🌙 1.选择合适的鼠标光标
// 提示禁用状态
:disabled, [disabled], [aria-disabled="true"] {
cursor: not-allowed;
}
// 隐藏鼠标光标
video {
cursor: url('transparent.gif');
cursor: none;
}
2
3
4
5
6
7
8
9
10
🌙 2.扩大可点击区域
button {
position: relative;
/* [其余样式] */
}
// 向外扩张了10px
button::before {
content: '';
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
2
3
4
5
6
7
8
9
10
11
12
13
🌙 3.自定义复选框
See the Pen CSS3-自定义复选框 by Keekuun (@keekuun) on CodePen.
🌙 4.通过阴影来弱化背景
See the Pen CSS3-通过阴影来弱化背景 by Keekuun (@keekuun) on CodePen.
🌙 5.通过模糊来弱化背景
See the Pen CSS3-通过模糊来弱化背景 by Keekuun (@keekuun) on CodePen.
🌙 6.滚动提示
https://www.zhangxinxu.com/wordpress/2019/06/better-css-scroll-indicator/
- 简单效果
See the Pen CSS3-滚动提示 by Keekuun (@keekuun) on CodePen.
- 背景渐变效果
See the Pen CSS3-滚动提示（背景渐变） by Keekuun (@keekuun) on CodePen.
- 滚动条效果
See the Pen CSS3-滚动提示（滚动条） by Keekuun (@keekuun) on CodePen.
🌙 7.交互式的图片对比控件
See the Pen CSS3-图片对比（纯CSS控件） by Keekuun (@keekuun) on CodePen.
See the Pen CSS3-图片对比（range控件） by Keekuun (@keekuun) on CodePen.
🌙 七、结构和布局
🌙 1.自适应内部元素
See the Pen CSS3-自适应内部元素 by Keekuun (@keekuun) on CodePen.
🌙 2.精确控制表格列宽
See the Pen CSS3-精确控制表格列宽 by Keekuun (@keekuun) on CodePen.
🌙 3.根据兄弟元素的数量设置样式
See the Pen CSS3-根据兄弟元素的数量设置样式 by Keekuun (@keekuun) on CodePen.
See the Pen CSS3-根据兄弟元素的数量设置样式（二） by Keekuun (@keekuun) on CodePen.
🌙 4.满幅的背景、定宽的内容
See the Pen CSS3-满幅的背景、定宽的内容 by Keekuun (@keekuun) on CodePen.
🌙 5.水平垂直居中
https://www.jianshu.com/p/c78fa42e6e78
- 基于绝对定位的解决方案
main {
position: absolute;
top: 50%;
left:50%;
margin-top: -5em; // height的一半
margin-left: -3em; // width的一半
width: 6em;
height: 10em;
}
2
3
4
5
6
7
8
9
main {
position: absolute;
top: calc(50% - 5em);
left:calc(50% - 3em);
width: 6em;
height: 10em;
}
2
3
4
5
6
7
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2
3
4
5
6
- 基于视口(模态框的定位方式)
main {
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em; /* 6/2 = 3 */
margin-left: -9em; /* 18/2 = 9 */
width: 18em;
height: 6em;
}
2
3
4
5
6
7
8
9
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
2
3
4
5
6
- 基于 Flexbox
body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
}
2
3
4
5
6
7
8
main {
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
}
2
3
4
5
6
7
🌙 6.紧贴底部的页角
See the Pen CSS3-紧贴底部的页角（粘连定位） by Keekuun (@keekuun) on CodePen.
🌙 八、过渡与动画
🌙 1.缓动效果
- 弹跳动画
See the Pen CSS3-紧贴底部的页角（粘连定位） by Keekuun (@keekuun) on CodePen.
- 弹性过渡
See the Pen CSS3-动画-缓动效果-弹性过渡 by Keekuun (@keekuun) on CodePen.
🌙 2.逐帧效果
See the Pen CSS3-动画-逐帧动画-loading by Keekuun (@keekuun) on CodePen.
🌙 3.闪动效果
See the Pen CSS3-动画-闪烁效果 by Keekuun (@keekuun) on CodePen.
🌙 4.打字动画
See the Pen CSS3-动画-打字效果 by Keekuun (@keekuun) on CodePen.
🌙 5.状态平滑的动画
See the Pen CSS3-动画-状态平滑 by Keekuun (@keekuun) on CodePen.
🌙 6.沿环形路径平移的动画
See the Pen CSS3动画-圆形转动1 by Keekuun (@keekuun) on CodePen.
See the Pen CSS3-动画-圆形转动2 by Keekuun (@keekuun) on CodePen.
“ transform-origin 只是一个语法糖而已。实际上你总是可以用translate() 来代替它。” ——Aryeh Gregor
每个 transform-origin 都是可以被两个translate() 模拟出来的。比如，下面两段代码实际上是等效的：
div {
transform: rotate(30deg);
transform-origin: 200px 300px;
}
div {
transform: translate(200px, 300px) rotate(30deg) translate(-200px, -300px);
transform-origin: 0 0;
}
2
3
4
5
6
7
8
9