CSS值函数

一、介绍

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 值函数的文档以获得更多相关信息。

二、资料

• CSS 值函数：

  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Functions