CSS值函数

20 阅读1分钟

一、介绍

CSS 中可以使用多种函数来操作属性值。以下是一些常用的 CSS 函数,其中包括提取属性值的 attr() 函数:

  1. attr()

    1. 用法:attr(<attribute-name>)
    2. 作用:获取元素的指定属性值,并将其应用于 CSS 属性。
    3. 示例:content: attr(title);
  2. calc()

    1. 用法:calc(<calculation>)
    2. 作用:执行数学计算,并将结果应用于 CSS 属性。
    3. 示例:width: calc(100% - 20px);
  3. var()

    1. 用法:var(<custom-property-name>)
    2. 作用:引用自定义属性的值,并将其应用于 CSS 属性。
    3. 示例:color: var(--main-color);
  4. rgba()

    1. 用法:rgba(<red>, <green>, <blue>, <alpha>)
    2. 作用:创建一个包含红色、绿色、蓝色和透明度的颜色。
    3. 示例:background-color: rgba(255, 0, 0, 0.5);
  5. url()

    1. 用法:url(<url>)
    2. 作用:指定一个 URL,通常用于引用外部资源,如图像。
    3. 示例:background-image: url('image.jpg');
  6. linear-gradient()

    1. 用法:linear-gradient(<direction>, <color-stop1>, <color-stop2>, ...)
    2. 作用:创建一个线性渐变背景。
    3. 示例:background-image: linear-gradient(to right, red, blue);
  7. radial-gradient()

    1. 用法:radial-gradient(<shape>, <size>, <color-stop1>, <color-stop2>, ...)
    2. 作用:创建一个径向渐变背景。
    3. 示例:background-image: radial-gradient(circle, red, blue);

这只是一小部分常用的 CSS 函数示例。CSS 还提供了许多其他函数,用于处理颜色、文本、变换等。你可以根据具体需求,查阅 CSS 值函数的文档以获得更多相关信息。

二、资料