CSS-函数详解

rgb/rgba/translate/rotate/scale等函数在之前的文章提到过，此处不再赘述。

1. var：定义变量

CSS中可以自定义属性

• 属性名需要以两个减号（–）开始

• 属性值则可以是任何有效的CSS值

  <style> :root {
    /* 定义了一个变量(CSS属性) */
    /* 只有后代元素可以使用 */
    --main-color: #f00;
  }
  
  .box {
    color: var(--main-color);
  }
  
  .title {
    color: var(--main-color);
  } </style>
  
  <div class="box">
    我是box
  </div>
  
  <h1 class="title">
    我是标题
  </h1> 
  

  

• 规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)

  • 推荐将自定义属性定义在html中，也可以使用 :root 选择器

2. calc：计算CSS值

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

• 计算支持加减乘除的运算；

  • + 和 - 运算符的两边必须要有空白字符。

• 通常用来设置一些元素的尺寸或者位置

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

3. blur：毛玻璃（高斯模糊）效果

• blur() 函数将高斯模糊应用于输出图片或者元素

  • blur(radius)

  • radius 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊

• 通常会和两个属性一起使用：

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

  img {
    filter: blur(5px);
  }
  
  <img src="../images/kobe01.jpg" alt=""> 
  

  

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

  <style> .box {
    display: inline-block;
    position: relative;
  }
  
  .cover {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
  } </style>
  
  <div class="box">
    <img src="../images/kobe01.jpg" alt="">
    <div class="cover"></div>
  </div> 
  

  

4. gradient：颜色渐变函数

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

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

• <gradient>常见的函数实现有下面几种：

  • linear-gradient()：创建一个表示两种或多种颜色线性渐变的图片

  .box {
    width: 200px;
    height: 100px;
    /* top -> bottom */
    background-image: linear-gradient(red, blue);
  } 
  

  

  .box {
    width: 200px;
    height: 100px;
    /* top -> bottom */
    /* background-image: linear-gradient(red, blue); */
    /* 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()：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成

  .box {
    width: 200px;
    height: 100px;
    /* 中心向四周渐变 */
    /* background-image: radial-gradient(red, blue); */
    /* 改变方向 */
    background-image: radial-gradient(at 0% 50%, red, blue);
  } 
  

  

  • repeating-linear-gradient()：创建一个由重复线性渐变组成的<image>

  • repeating-radial-gradient()：创建一个重复的原点触发渐变组成的<image>