CSS常用函数补充(var、clac、blur、gradient)

CSS常用函数补充(var、clac、blur、gradient)
文章目录
- 一、var
  1.1 简介
  1.2 使用
  1.3 规则
  
  二、calc
  2.1 简介
  2.2 使用
  
  三、blur
  3.1 简介
  3.2 使用
  3.2.1 filter
  3.2.2 backdrop-filter
  
  四、gradient
  4.1 简介
  4.2 使用
  4.2.1 linear-gradient
  4.2.2 radial-gradient
一、var

1.1 简介

使用CSS定义的变量或属性

1.2 使用

在CSS中可以自定义属性，属性名需要以两个减号(--)开始，属性值可以是任何有效的CSS值

自定义属性如下:
```
html{
  --main-color: red;
}
1
2
3
```
通过var函数使用自定义属性：
```
span{
  color: var(--main-color);
}
1
2
3
```
1.3 规则

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

二、calc

2.1 简介
- 计算CSS值，通常用于计算元素的大小或位置
- ＋－ ✖️ ÷运算符的两边必须要有空白字符
2.2 使用
```
.box{
  width: calc(100% - 100px);
  height: 120px;
  background-color: pink;
}
1
2
3
4
5
```
三、blur

3.1 简介

将高斯模糊应用于图片或元素
blur(radius)：radius，模糊半径，用于定义高斯函数的偏差值，偏差值越大，图片越模糊

 3.2 使用

通常会结合两个属性一起使用：
- filter：将模糊或颜色偏移等图形效果应用于元素
- backdrop-filter：为元素后面区域添加模糊或其他效果
3.2.1 filter

原始代码：
```
<body>
  <img src="./assets/images/c.webp" alt="">
body>
1
2
3
```
显示如图：

当给img应用filter: blur()属性时：
```
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>Documenttitle>
  <style>
    img {
      filter: blur(5px);
    }
  style>
head>

<body>
  <img src="./assets/images/c.webp" alt="">
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
```
模糊效果如下：

3.2.2 backdrop-filter

backdrop-filter设置时，通常会与background-color结合使用(设置透明度)，否则效果同filter是一致的。
代码：
```
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>Documenttitle>
  <style>
    /* img {
      filter: blur(5px);
    } */
    .box {
      position: relative;
      display: inline-block;
    }

    .cover {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .5);
      backdrop-filter: blur(5px);
    }
  style>
head>

<body>
  <div class="box">
    <img src="./assets/images/c.webp" alt="">
    <div class="cover">div>
  div>
body>

html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
```
显示效果如下：

这就有点类似网易云毛玻璃效果了。

四、gradient

4.1 简介

是一种CSS数据类型的子类型，用于表现两种或多种颜色的过度转变
- CSS的数据类型描述的是2D图形
- 如background-image、list-style-image、border-image、content等
- 常见的方式是通过URL来引入一个图片资源
- 也可以通过CSS的函数来设置颜色的渐变
常见的函数实现有：
- linear-gradient：创建一个表示两种或多种颜色线性渐变的图片
- radial-gradient：创建一个图像，改图像是由原点发出的两种或多种颜色之间的逐步过度组成
- repeating-linear-gradient：创建一个由重复性渐变组成的
- repeating-radial-gradient：创建一个重复的原点触发渐变组成的image
4.2 使用

4.2.1 linear-gradient

线性渐变在开发中比较常用，演示如下：

默认方向：
```
<style>
 .box {
   width: 200px;
   height: 100px;
   background-image: linear-gradient(red, blue);
 }
style>

<body>
  <div class="box">div>
body>
1
2
3
4
5
6
7
8
9
10
11
```
效果如下：

自左向右：
```
background-image: linear-gradient(to right, red, blue);
1
```
左上角到右下角：
```
background-image: linear-gradient(to right bottom, red, blue);
1
```
按角度：
```
background-image: linear-gradient(45deg, red, blue);
1
```
多种颜色：
```
background-image: linear-gradient(to right, red, blue 30%, orange 60%, pink);
1
```
4.2.2 radial-gradient

从中心点往外渐变，演示如下：

默认中心点：
```
background-image: radial-gradient(red, blue);
1
```
设置中心点：
```
background-image: radial-gradient(at 0 50%, red, blue);
1
```
相关阅读:
38. rem适配布局
 python 网页自动化实现
 文件复制到u盘后文件夹是空的,怎么恢复?
linux nginx开机自启
 Hypervisor Platform无法执行xmm寄存器fpu指令sse解决方法
 Spring默认缓存的使用-Simple
Postgresql事务测试
 go test 命令详解
 maven 打包出现 Please refer to XXXX for the individual test results
PostgreSQL JDBC连接详解(附DEMO)
原文地址：https://blog.csdn.net/u010358168/article/details/128159603

文章目录

一、var

1.1 简介

1.2 使用

1.3 规则

二、calc

2.1 简介

2.2 使用

三、blur

3.1 简介

3.2 使用

3.2.1 filter

3.2.2 backdrop-filter

四、gradient

4.1 简介

4.2 使用

4.2.1 linear-gradient

4.2.2 radial-gradient