CSS 中包含很多函数，比如rgb,rgba,translate,rotate,scale等, CSS 函数通常可以帮助我们更加灵活的来编写样式.
其它的 CSS 函数说明：

• var: 使用 CSS 定义变量
• calc: 计算 CSS 值，通常用于计算元素的大小或者位置
• blur: 毛玻璃(高斯模糊)效果
• gradient: 颜色渐变函数

var 函数

CSS 中可以自定义属

定义属性的规则以及使用

• 属性名需以--开始
• 属性值则可以是任何有效的 CSS 值
• 通过var函数来使用

div{
  --color-red: red;
}
span{
  color: var(--color-red)
}

规则集定义的选择器是自定义属性的可见作用域，即只在选择器内部有效，因此推荐将自定义属性定义在 html 中，也可以使用 :root 选择器

calc 函数

calc()函数允许在声明 CSS 属性值时执行一些计算。

提示

支持加减乘除的运算，+和-两边必须要有空白字符。

提示

通常用来动态计算一些元素的尺寸或者位置

.box{
  width: calc(100% - 60px);
  height: 100px;
}

blur 函数

blur()函数将高斯模糊应用于输出图片或者元素。
语法blur(radius),其中radius表示的是模糊半径，用于定义高斯函数的偏差值，偏差值越大，图片越模糊。通常会和下面两个属性一起使用

• filter: 将模糊或颜色偏移等图形效果应用于元素

img{
filter: blur(5px);
}

<img src="./media/kobe01.jpg" alt="">

// Make sure to add code blocks to your code group

• backdrop-filter: 为元素后面的区域添加模糊或者其它效果

.box {
  display: inline-block;
  position: relative;
}
.cover {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0,0,0,.3);
  backdrop-filter: blur(5px);
}

<div class="box">
  <img src="./media/kobe01.jpg" alt="">
  <div class="cover"></div>
</div>

// Make sure to add code blocks to your code group

gradient 函数

gradient是一种imageCSS 数据类型的原子类型，用于表现两种或多种颜色的过渡转变

说明

• CSS 的image数据类型描述的是 2D 图形
• 比如background-image,list-style-image,border-image,content等
• image常见的方式是通过 url 来引入一个图片资源
• 也可以通过 CSS 的gradient函数来设置颜色的渐变

gradient 常见的函数实现

• linear-gradient(): 创建一个表示两种或者多种颜色线型渐变的图片
• radial-gradient(): 创建一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成
• repeating-linear-gradient(): 创建一个由重复线性渐变组成的图片
• repeating-radial-gradient(): 创建一个重复的原点触发渐变组成的图片
• ...

linear-gradient 的使用

1. linear-gradient默认,从上到下渐变

.box{
  width: 300px;
  height: 300px;
  background-image: linear-gradient(red, blue);
}

<div class="box"></div>

// Make sure to add code blocks to your code group

2. 修改linear-gradient渐变方向

.box{
  width: 300px;
  height: 300px;
  background-image: linear-gradient(to right, red, blue);
}

<div class="box"></div>

// Make sure to add code blocks to your code group

3. 修改斜对角方向渐变

.box{
  width: 300px;
  height: 300px;
  background-image: linear-gradient(to right bottom, red, blue);
}

<div class="box"></div>

// Make sure to add code blocks to your code group

4. 使用角度修改渐变方向

.box{
  width: 300px;
  height: 300px;
  background-image: linear-gradient(45deg, red, blue);
}

<div class="box"></div>

// Make sure to add code blocks to your code group

5. 多种颜色的线型渐变

.box{
  width: 300px;
  height: 300px;
  background-image: linear-gradient(to right, red, blue 10%, purple 40px, orange);
}

<div class="box"></div>

// Make sure to add code blocks to your code group

5. radial-gradient 默认使用

.box{
  width: 300px;
  height: 300px;
  background-image: radial-gradient(blue, red);
}

<div class="box"></div>

// Make sure to add code blocks to your code group

6. radial-gradient 修改原点

.box{
  width: 300px;
  height: 300px;
  background-image: radial-gradient(at 0% 50%, blue, red);
}

<div class="box"></div>

// Make sure to add code blocks to your code group