- var: 使用 CSS 定义的变量
- calc:计算css值,通常用于计算元素的大小或位置
- blur: 毛玻璃(高斯模糊)效果
- gradient: 颜色渐变函数
var函数
CSS 中 可以 自定义属性
- 属性名需要以**两个减号(--)**开始;
- 属性值则可以是 任何有效的CSS 值;
定义CSS变量
div {
--mainColor:red;
}
通过 var 函数 使用CSS 变量
span {
color:var(--mainColor)
}
自定义CSS 变量的作用域
作用域是指 一个变量可以使用的范围,我们自定义的CSS 变量 是有能够使用的范围的,不是 定义一个变量后,可以在任意的地方使用.
具体规则如下:
规则(自定义CSS变量)定义的选择器,是自定义属性的可见作用域(只在选择器内有效)
所以推荐将自定义属性定义在html 中,也可以使用** :root 选择器**.
:root {
// 这里定义自定义CSS 变量
}
或者
html {
// 这里定义自定义CSS 变量
}
在这两个地方 定义的CSS变量,变量的作用域 相当于整个 html 文档,也就可以在任意地方使用了.
当然 如果不想将某个变量 覆盖这么大的作用域,可以自行决定 定义CSS 变量的选择器
使用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
:root {
--mainColor: red;
}
span {
color: var(--mainColor);
}
</style>
</head>
<body>
<span>我试试我的颜色</span>
</body>
</html>
calc函数
calc() 函数允许在声明 CSS 属性值时 执行一些计算
-
计算支持加减乘除的运算
‘+’ 和 ‘-’ 运算符的两边 必须要有空白字符.
-
通常用来设置一些元素的尺寸或者位置
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
height: 100px;
width: 100px;
background-color: aquamarine;
}
.container {
height: calc(100% - 50px);
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="container"></div>
</div>
</body>
</html>
blur
blur() 函数用于将 高斯模糊 应用于 输出图片或者元素
- blur(radius)
- radius,模糊的半径,用于定义高斯函数的 偏差值,偏差值越大,图片越模糊
通常会和两个属性一起使用:
- filter:将模糊或颜色偏移等图形效果应用于元素;
- backdrop-filter: 为元素后面的区域添加模糊或者其他效果
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
height: 167px;
width: 242px;
position: relative;
}
.img {
width: 100%;
height: 100%;
}
.cover {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
backdrop-filter: blur(5px);
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box">
<img src="./imgs/kobe02.png" class="img" alt="" />
<div class="cover"></div>
</div>
</body>
</html>
gradient
gradient概述
< gradient > 是一种< image >CSS数据类型的子类型,用于表现两种或多种颜色的过渡转变.
- CSS 的 < image > 数据类型描述的是 2D 图形.
- 比如 background-image,list-style-image,border-image,content 等;
- < image > 常见的方式 是 通过url来引入一个图片资源.
- 它也可以通过 CSS 的< gradient > 函数来生成一张图片,来设置颜色渐变
gradient 常见函数
- < gradient >常见的函数实现有如下几种:
- linear-gradient() : 创建一个 表示两种或多种颜色线性渐变的图片;
- radial-gradient():创建了一个图像,该图像是由 从原点出发的两种或者多种颜色之间的逐步过渡组成
- repeating-linear-gradient():创建一个由重复线性渐变组成的< image >;
- repeating-radial-gradient():创建一个重复的原点触发渐变组成的 < image >
- 等等
gradient 的常见使用
linear-gradient: 创建一个表示两种或多种颜色线性渐变的图片:
background-image:linear-gradient(blue,red);
background-image:linear-gradient(to right, blue,red);
background-image:linear-gradient(to right bottom, blue,red);
background-image:linear-gradient(45deg, blue,red);
background-image:linear-gradient(to right, bulue, red 10%, purple, blue 40px,orange);
radial-gradient: 创建了一个图像,该图像由从原点出发的两种或者多种颜色之间的逐步过渡组成;
background-image:radial-gradient(blue,red);
background-image:radial-gradient(at 0% 50%,blue,red);
