css总结6（函数）

前言

(1) 了解一些文本相关的伪选择器的知识；
(2) 了解表格布局的相关知识：fr为网格布局单位，表示值在0~1fr之间，表示剩余空间长度的百分比，如1fr代表100%、.25fr代表25%；
(3) 了解合法颜色类型值的相关知识；

技巧函数 (5个)

### (1) 属性值获取
attr(attrName)
示例：
a:after{
    content:attr(href);
}

### (2) 计算属性值
calc(express);

注意：这个函数使用的时候运算符两边要有空格
示例：calc(100% - 100px)

错误写法：calc(100%-100px)

### (3) 计数器
counter(countername,counterstyle);
示例：
body {
  counter-reset: section;
}
p:before {
  counter-increment: section;
  content: "Section " counter(section)  ": ";
}

### (4) 变量引用
var(varName);
示例：
:root {
  --mycolor: coral;
}
#test{
  background-color: var(--mycolor);
}

### (5)贝塞尔曲线
cubic-bezier(x1,y1,x2,y2)
示例：
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.5, 1.0, 0.9);
}
div:hover {
  width:300px;
}
 

颜色函数(4个) 

rgb(r,g,b)
rgba(r,g,b,a)
hsl(h,s,l)
hsla(h,s,l,a)

渐变函数(6个)

### (1) 线性渐变
linear-gradient([angle]|[to direction],*(color [xpos]))
根据某个方位或角度来进行线性渐变，默认渐变方向为上下渐变，剩余空间采用末尾颜色纯色填充策略
angle：可选，角度(单位为deg的值)
direction:可选参数，方位词(共15个)
color：可变参数，颜色
xpos：可选颜色补充，指定颜色渐变的终点横向位置
示例：linear-gradient(30deg,red 10%,yellow 50%,green 40%)

### (2) 重复线性渐变
repeating-linear-gradient([angle]|[to direction],*(color [xpos]))
与线性渐变不同的是，剩余空间采用重复填充策略
示例：repeating-linear-gradient(to right,red 0,yellow 10%,green 20%)

### (3) 径向渐变
radial-gradient([shape] [size] [at position],*(color [radius]))
由圆心向外径向渐变，剩余空间采用末尾颜色纯色填充策略
shape：ellipse(默认值，椭圆)，circle(圆)
size：farthest-conner(默认值，渐变到最远角)、farthest-side、closest-side、closest-conner
position：渐变的中心起始位置，center、top、bottom
radius：渐变的终点半径
示例：radial-gradient(circle,red yellow green)

### (4) 重复径向渐变
repeating-radial-gradient([shape] [size] [at position],*(color [radius]))
与径向渐变不同的是，剩余空间采用重复填充策略
示例：radial-gradient(circle,red 20px yellow 40px green 60px)

### (5) 圆锥渐变
conic-gradient([from angle] [at position],*color [angle])
由圆心顺逆时针渐变，剩余空间使用末尾颜色的纯色填充策略
from angle：可选参数，默认为0，指定开始角度，参考十二点钟方向
position：渐变的中心起始位置，center、top、bottom
angle：可选颜色补充，指定当前颜色的渐变角度终点(0deg~360deg)
示例：conic-gradient(green 10%,yellow 50%,blue 60%)

### (6) 重复圆锥渐变
repeating-conic-gradient([from angle] [at position],*color [angle])
与圆锥渐变不同的是，剩余空间使用重复填充策略
示例：conic-gradient(green 10%,yellow 20%)

最大最小函数(3个) 

### (1) 最大

max(*value)
返回所给参数值中最大的值，支持比较不同单位的值
示例：max(500px,30%)

### (2) 最小

min(*value)
返回所给参数值中最大的值，支持比较不同单位的值
示例：min(500px,30%)

### (3) 最小最大
结合表格布局使用
# 3.1 最小尺寸限制
minmax(length, 1fr)

限制最小为指定最小宽度，限制最大为自适应最大宽度(最小限制为指定)

# 3.2 最大尺寸限制
minmax(min-content, auto)：

限制最小为最小内容宽度，限制最大为自动内容宽度(最大限制为自动)
minmax(min-content, length)：

限制最小为最小内容宽度，限制最大指定内容宽度(最大限制为指定)
minmax(auto,length)：

限制最小为自动内容宽度，限制最大内容宽度(最大限制为指定)

# 3.3 最小最大尺寸限制
minmax(length,max-length)：

限制最小为指定最小宽度，限制最大为自适应宽度(最小限制为指定最大限制为自适应)
minmax(length,length)：

限制最小为指定最小宽度，限制最大为指定最大宽度(最小限制为指定最大限制为指定)
minmx(length,auto)：

限制最小尺寸为指定最小宽度，限制最大为自动内容宽度(最小限制为指定最大限制为自动)

# 3.4 固定尺寸
minmax(length, min-content)：

限制最小为指定最小宽度，限制最大为最小宽度(固定为最小尺寸)
minmax(max-content, length)：

限制最小为最大宽度，限制最大为指定最大宽度(固定为最大尺寸)
minmax(max-content,auto)：

限制最小宽度为最大宽度，限制最大宽度为自适应宽度(固定为自动最大尺寸)