css3 函数汇总(笔记)

1. 变量函数 var()

使 css 中也可以像 js 一样声明变量，但是在使用之前应该要知道一些东西

1. :root 对应着 html元素表示根元素
2. 使用 --变量名 声明变量
3. 只有父级或当前元素声明的变量才可以使用
4. 使用 var(--变量名) 就可以获取到对应的值
5. var(当前值, 回退值)，当第一个值未定义，回退值生效
6. 多单词写法不讲究，一般都是 --text-color 而不是 --textColor，两种都可以，但是第一种情况使用的多一些
7. 还有一点变量可以通过行内样式写入，写写小 demo 还是很方便的

:root {
  --text-color: red;
}

span {
  --text-padding: 12px;
  
  color: var(--text-color); /* 情况一直接使用：red; */
  
  font-size: var(--text-size, 24px); /* 情况二当前值不存在：24px; */

  padding: 0 var(--text-padding, 24px); /* 情况三当前值存在：12px; */
}
1
2
3
4
5
6
7
8
9
10
11
12
13

2. 计算函数 calc()

使 css 的属性值可以进行四则运算

1. css 函数之间可以存在合理的嵌套使用
2. 使用 calc(num1 + num2) 时最好向前面一样使用空格隔开，不然会失效，比如+-不隔开会失效，而*/并不会
3. 根据不同的情况添加单位，一般 +- 是相同规则，*/ 是相同规则

span {
  --w: 50px;
  font-size: calc(24px * 2); /* 48px */
  width: calc(50px + 50px); /* 100px */
  padding: calc(var(--w) + 50px); /* 100px */
}
1
2
3
4
5
6

3. 重复函数 repeat()

一般用于网格布局的 grid-template-columns 和 grid-template-rows 属性

• repeat(n, size)：n 表示需要设置几列，size 表示每列的尺寸大小
• 自动填充属性：repeat(auto-fill, size)、repeat(auto-fit, size)
• auto-fill：默认填充当前视口最大行/列数，当内容数 < 当前视口最大行/列数，取当前视口最大行/列数
• auto-fit：默认填充当前视口最大行/列数，当内容数 < 当前视口最大行/列数，取当内容数

4. 渐变类函数

它们都是 background-image 的属性

4.1 线形渐变 linear-gradient()

规则：

1. 渐变角度规则是按照 css 中上右下左的，第一个角度是终点角度，而不是开始角度
2. 比如 0deg 是上，则表示从下向上，90deg 是右，则表示从左向右
3. 角度为空默认为 180deg

示例:

• linear-gradient(渐变角度, 开始颜色, 结束颜色)
• linear-gradient(渐变角度, 颜色 百分比, 颜色 百分比, 颜色 百分比)
• linear-gradient(to left top, 开始颜色, 结束颜色)，从右下到左上

div {
  background-image: linear-gradient(red, blue);/* 默认从上向下渐变，也就是 180deg */
  background-image: linear-gradient(90deg, red 0%, blue 100%); /* 90deg 从左向右渐变 */
}
1
2
3
4

4.2 径向渐变 radial-gradient()

规则：

1. 渐变是从内向外渐变的
2. 渐变类型为空默认为圆形渐变
3. at 百分比，默认为 50%，大于 50% 中心点向右，小于 50% 中心点向左
4. 颜色可以为多个

示例：

• radial-gradient(渐变类型 at 百分比, 渐变颜色…)，类型为圆形 circle、椭圆 ellipse

div {
  background-image: radial-gradient(circle, white, black); /* 默认at 50%，从内白向外黑渐变 */
}
1
2
3

4.3 线形重复渐变 repeating-linear-gradient()

使用方式和线形渐变一样，不过当渐变内容不足以撑满时会重复渐变

div {
  background-image: repeating-linear-gradient(lightpink, white); /* 正常情况下的渐变 */
  background-image: repeating-linear-gradient(lightpink 0px, lightpink 5px, white 5px, white 10px); /* 重复渐变 */
}
1
2
3
4

4.4 径向重复渐变 repeating-radial-gradient()

使用方式和径向渐变一样，不过当渐变内容不足以撑满时会重复渐变

div {
  background-image: repeating-radial-gradient(lightpink 0px, lightpink 5px, white 5px, white 10px);
}
1
2
3

4.5 二次曲线渐变

• 第一个参数可以指定渐变开始角度，开始位置，默认为中心、0deg
• 每个颜色都可以设置渐变角度

div {
  background-image: conic-gradient(red, orange, yellow, green, blue); /* 基本使用*/
}
1
2
3

5. 过滤类函数(过滤自身)

filter 属性

5.1 模糊图像 blur()

div {
  filter: blur(1px); /* 模糊半径，像素单位 */ 
}
1
2
3

5.2 改变图像亮度 brightness()

div {
  filter: brightness(1); /* 默认值为1，大于1更明亮，小于1更黑暗 */
}
1
2
3

5.3 改变图像的对比度 contrast()

div {
  filter: contrast(1); /* 默认值为1，大于1增加对比度，小于1减少对比度 */
}
1
2
3

5.4 在图像后方应用投影 drop-shadow()

兼容性很差

div {
  filter: drop-shadow(10px 10px 10px red); /* X轴偏移，Y轴偏移，模糊半径，投影颜色 */
}
1
2
3

5.5 将图像转为灰度图 grayscale()

div {
  filter: grayscale(1); /* 默认值为1，1灰度最大，0没有效果 */
}
1
2
3

5.6 改变图像的整体色调 hue-rotate()

div {
  filter: hue-rotate(0deg);/* 默认值0deg或360deg，0deg~360deg之间会做改变 */ 
}
1
2
3

5.7 反转图像颜色 invert()

div {
  filter: invert(1); /* 默认值为1，1反转最大，0没有效果 */
}
1
2
3

5.8 改变图像透明度 opacity()

div {
  filter: opacity(1); /* 默认值为1，1没有效果，0变透明 */
}
1
2
3

5.9 超饱和或去饱和输入的图像 saturate()

div {
  filter: saturate(1); /* 默认值为1，1没有效果，1~0去饱和，大于1变饱和 */
}
1
2
3

5.10 将图像转为棕褐色 sepia()

div {
  filter: sepia(1); /* 默认值为1，1转换最大，0没有效果 */
}
1
2
3

6. 过滤类函数(过滤背后)

backdrop-filter 属性

• 为自身元素背后区域添加图形效果
• 可以理解为在一个图片的某一个区域添加一个元素，为元素设置 backdrop-filte 属性，就可以达到区域过滤，比如毛玻璃
• 该属性可以使用 filter 的大部分属性，其效果也是一样的，这里就不一一展示了
• 还有一点添加的元素最好不要设置背景颜色，不然会覆盖过滤的效果

7. 变换类函数

这个在之前 css 过渡动画 中有讲到