1. 变量函数 var()
使 css 中也可以像 js 一样声明变量,但是在使用之前应该要知道一些东西
- :root 对应着 html元素表示根元素
- 使用
--变量名
声明变量 - 只有父级或当前元素声明的变量才可以使用
- 使用
var(--变量名)
就可以获取到对应的值 var(当前值, 回退值)
,当第一个值未定义,回退值生效- 多单词写法不讲究,一般都是
--text-color
而不是--textColor
,两种都可以,但是第一种情况使用的多一些 - 还有一点变量可以通过行内样式写入,写写小 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; */
}
2. 计算函数 calc()
使 css 的属性值可以进行四则运算
- css 函数之间可以存在合理的嵌套使用
- 使用
calc(num1 + num2)
时最好向前面一样使用空格隔开,不然会失效,比如+-
不隔开会失效,而*/
并不会 - 根据不同的情况添加单位,一般
+-
是相同规则,*/
是相同规则
span {
--w: 50px;
font-size: calc(24px * 2); /* 48px */
width: calc(50px + 50px); /* 100px */
padding: calc(var(--w) + 50px); /* 100px */
}
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()
规则:
- 渐变角度规则是按照 css 中上右下左的,第一个角度是终点角度,而不是开始角度
- 比如 0deg 是上,则表示从下向上,90deg 是右,则表示从左向右
- 角度为空默认为 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 从左向右渐变 */
}
4.2 径向渐变 radial-gradient()
规则:
- 渐变是从内向外渐变的
- 渐变类型为空默认为圆形渐变
- at 百分比,默认为 50%,大于 50% 中心点向右,小于 50% 中心点向左
- 颜色可以为多个
示例:
- radial-gradient(渐变类型 at 百分比, 渐变颜色…),类型为圆形 circle、椭圆 ellipse
div {
background-image: radial-gradient(circle, white, black); /* 默认at 50%,从内白向外黑渐变 */
}
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); /* 重复渐变 */
}
4.4 径向重复渐变 repeating-radial-gradient()
使用方式和径向渐变一样,不过当渐变内容不足以撑满时会重复渐变
div {
background-image: repeating-radial-gradient(lightpink 0px, lightpink 5px, white 5px, white 10px);
}
4.5 二次曲线渐变
- 第一个参数可以指定渐变开始角度,开始位置,默认为中心、0deg
- 每个颜色都可以设置渐变角度
div {
background-image: conic-gradient(red, orange, yellow, green, blue); /* 基本使用*/
}
5. 过滤类函数(过滤自身)
filter 属性
5.1 模糊图像 blur()
div {
filter: blur(1px); /* 模糊半径,像素单位 */
}
5.2 改变图像亮度 brightness()
div {
filter: brightness(1); /* 默认值为1,大于1更明亮,小于1更黑暗 */
}
5.3 改变图像的对比度 contrast()
div {
filter: contrast(1); /* 默认值为1,大于1增加对比度,小于1减少对比度 */
}
5.4 在图像后方应用投影 drop-shadow()
兼容性很差
div {
filter: drop-shadow(10px 10px 10px red); /* X轴偏移,Y轴偏移,模糊半径,投影颜色 */
}
5.5 将图像转为灰度图 grayscale()
div {
filter: grayscale(1); /* 默认值为1,1灰度最大,0没有效果 */
}
5.6 改变图像的整体色调 hue-rotate()
div {
filter: hue-rotate(0deg);/* 默认值0deg或360deg,0deg~360deg之间会做改变 */
}
5.7 反转图像颜色 invert()
div {
filter: invert(1); /* 默认值为1,1反转最大,0没有效果 */
}
5.8 改变图像透明度 opacity()
div {
filter: opacity(1); /* 默认值为1,1没有效果,0变透明 */
}
5.9 超饱和或去饱和输入的图像 saturate()
div {
filter: saturate(1); /* 默认值为1,1没有效果,1~0去饱和,大于1变饱和 */
}
5.10 将图像转为棕褐色 sepia()
div {
filter: sepia(1); /* 默认值为1,1转换最大,0没有效果 */
}
6. 过滤类函数(过滤背后)
backdrop-filter 属性
- 为自身元素背后区域添加图形效果
- 可以理解为在一个图片的某一个区域添加一个元素,为元素设置 backdrop-filte 属性,就可以达到区域过滤,比如毛玻璃
- 该属性可以使用 filter 的大部分属性,其效果也是一样的,这里就不一一展示了
- 还有一点添加的元素最好不要设置背景颜色,不然会覆盖过滤的效果
7. 变换类函数
这个在之前 css 过渡动画 中有讲到