CSS常见的函数扩展

CSS中的函数

CSS中有许许多多的函数，例如rgb/rgba/translate/rotate/scale等

这些CSS函数通常可以帮助我们更加灵活的来编写样式的值

var 函数

使用var函数，可以帮助我们在CSS中定义变量在CSS中，定义的变量，其作用域为当前定义的元素及其子元素

所以有的时候，在定义一些全局CSS变量的时候，我们会将其定义到html元素选择器或:root选择器中

<!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 {
      /* 定义了一个变量(CSS属性) */
      /* 只有后代元素可以使用 */
      
       /* 
    	CSS中定义属性名的时候 
    	属性名需要以两个减号(--)开始
	属性值则可以是任何有效的CSS值
      */
      --main-color: #f00;
    }
    
    .box {
      /* 在使用css变量的时候，需要使用var函数 */
      color: var(--main-color);
    }

    .title {
      color: var(--main-color);
    }

  </style>
</head>
<body>
  
  <div class="box">
    我是box
  </div>

  <h1 class="title">
    我是标题
  </h1>

</body>
</html>

calc 函数

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

计算支持加减乘除的运算
calc函数支持 px，%，em和rem， vw，vh之间的相互计算
- 在进行加法或减法运算的时候，等式中所有的表达式都必须有对应的单位，不可以是纯数值类型
- 在进行乘或者除运算的时候，等式中只能在第一个计算值可以具有对应的单位，其余值必须是纯数值类型
- 在运算符的左右两边必须存在空格
calc函数通常被用来设置一些元素的尺寸或者位置

<!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 {
      width: 500px;
      height: 100px;
      background-color: orange;
    }

    .item {
      height: 50px;
      display: inline-block;
    }

    .item1 {
      /* width的百分比相对于包含块(父元素) */
      width: calc(100% - 100px);
      background-color: #f00;
    }

    .item2 {
      width: 100px;
      background-color: #0f0;
      /*
        100% 等价于 div.item的height值被设置为100%
        也就是div.item的包含块(在这里是div.container)宽度的100%
        所以calc(100% - 100px)等价于100px-80px -> 20px
      */
      height: calc(100% - 80px);
    }
  </style>
</head>
<body>
  
  <div class="box">
    <div class="item item1"></div>
    <div class="item item2"></div>
  </div>

</body>
</html>

blur 函数

blur 函数用于在图片或者在某个元素及其所有的子元素上添加对应的高斯模糊

blur函数通常会和filter或backdrop-filter属性一起使用

函数名	作用
filter	为图片，元素添加不同效果的滤镜效果
backdrop-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>Document</title>
  <style>
    /* img {
      filter: blur(5px);
    } */

    .box {
      display: inline-block;
      position: relative;
       /* 添加高斯模糊 --- 参数为模糊半径 --- 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊 */
      /* filter: blur(5px); */
    }

    .cover {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(255,255,255,0.2);
      
      /*
        filter是给当前元素及其子元素设置滤镜效果
        backdrop-filter是给当前元素下边的元素设置滤镜效果

        所以为了看到对应的效果
        backdrop-filter在设置滤镜的时候
        一般要求当前元素为透明或半透明
      */

      
      backdrop-filter: blur(10px);
    }
  </style>
</head>
<body>
  
  <!-- filter -->
  <!-- <img src="../images/kobe01.jpg" alt=""> -->

  <div class="box">
    <img src="../images/kobe01.jpg" alt="">
    <div class="cover"></div>
  </div>
</body>
</html>

gradient 函数

CSS的<image>数据类型描述的是2D图形

<gradient> 是<image>的子类型，用于表现两种或多种颜色的过渡转变

所以在CSS中，渐变的本质其实就是图片

函数名	功能
linear-gradient	线性渐变 --- 创建一个表示两种或多种颜色线性渐变的图片
radial-gradient	径向渐变 --- 创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成

<!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 {
      width: 200px;
      height: 100px;

      /* background-color: orange; */
      /* 默认渐变 --- 渐变方向是从上往下进行渐变的 */
      /* background-image: linear-gradient(red, blue); */
      /* 改变方向 */
      /* linear-gradient 第一个参数可以指定渐变方向 */
      /* background-image: linear-gradient(to right, red, blue); */
      /* background-image: linear-gradient(to right top, red, blue); */
      /* background-image: linear-gradient(-45deg, red, blue); */
      /* background-image: linear-gradient(to right, red, blue 40px, orange 60%, purple 100%); */


      /* radial-gradient */
      /* 默认的径向渐变 --- 渐变点是图像的中心点 */
      /* background-image: radial-gradient(red, blue); */
      /* 第一个参数为 渐变点的位置 */
      background-image: radial-gradient(at 0% 50%, red, blue);
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>

17_CSS常见的函数扩展