【CSS】CSS函数

这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战

---

CSS函数

与JavaScript一样，CSS中也是有着一些函数的，本文对其中常用的几种函数作简单介绍

（1）rgb()、rgba()

• 作用：用于设置颜色，应该是最常用的几种函数之一
• 语法：rgb(255, 255, 255)、rgba(255, 255, 255, 1)
  • rgb分别代表red、green、blue，值的范围为0 ~ 255
  • a表示颜色透明度，值的范围为0 ~ 1

（2）hsl()、hsla()

• 作用：同样用于设置颜色
• 语法：hsl()、hsla()
  • hsl分别代表色相hue、饱和度saturation、亮度lightness，值得范围为0% ~ 100%
  • a表示透明度，值的范围为0 ~ 1

（3）*-gradient()

• 作用：用于设置渐变色

• 语法：

  • linear-gradient：线性渐变

  • radial-gradient：径向渐变

  • conic-gradient：角向渐变

    具体用法，请移步这里

（4）transform

• 作用：用于transform变换
• 语法：
  • 包括translate()、rotate()、scale()等

（5）calc()

• 作用：用于动态计算长度值
• 语法：width: calc(100% - 100px)
  • 运算：
    • 支持加减乘除等运算
    • 且其计算规则按照数学运算中的优先级进行计算
    • 需要注意，运算符前后都必须有空格
  • 单位：
    • 可以是有效的长度单位值，如px、em、vw等
    • 也可以是有效的百分比值

（6）min()、max()

• 作用：用于获取属性值中的最小/最大值
• 语法：min(10px, 20px, 30px)、max(10px, 20px, 30px)
  • 用于获取其参数内的最小值、最大值

（7）attr()

• 作用：用于获取所选元素的某一个HTML属性值，目前仅适用于伪元素的content属性

• 语法：attr(attributeName, type, fallback)

  • 该函数接受三个参数
  • attributeName：用于设置HTML的属性名称
  • type：用于设置属性值的类型或者单位
  • fallback：用于设置默认值

• 使用：

  <div data-attr="伪类内容">正常内容</div>
  <style>
      div::after {
          content: attr(data-attr) "";
      }
      /* 或者 */
      [data-attr]::after {
          content: attr(data-attr) "";
      }
  </style>
  

（8）var()

• 作用：用于设置一个变量作为一个CSS属性的值，需要搭配:root使用

• 语法：var(variable)

  • variable表示设置的变量名

• 使用：

  • 先在:root中声明一个全局变量，用于定义相关的属性值的变量名

    :root {
        --text-color: #f00;
        --back-color: #ccc;
    }
    
    

    变量名必须以--开头

  • 然后在设置属性值时，通过var()函数来使用相应的变量名

    div {
        color: var(--text-color);
        background-color: var(--back-color);
    }
    

  • 为了避免变量名无效，我们可以设置var()的第二个参数来确保其能生效

    div {
        color: var(--color, #f00); /* 如果第一个变量不生效，则会使用第二个属性值 */
    }
    

（9）其它函数

• 还有更多函数，像滤镜函数、裁剪函数等，还有上篇文章的counter()函数等，这里不作展开介绍

---