css函数

/* 示例代码：使用 CSS 函数 */

/* 1. 使用 rgb() 函数 */
.example-rgb {
    background-color: rgb(255, 99, 71); /* 设置背景颜色为红色 */
}

/* 2. 使用 rgba() 函数 */
.example-rgba {
    background-color: rgba(0, 128, 0, 0.5); /* 设置背景颜色为半透明的绿色 */
}

/* 3. 使用 hsl() 函数 */
.example-hsl {
    background-color: hsl(240, 100%, 50%); /* 设置背景颜色为蓝色 */
}

/* 4. 使用 hsla() 函数 */
.example-hsla {
    background-color: hsla(120, 100%, 50%, 0.3); /* 设置背景颜色为半透明的青色 */
}

/* 5. 使用 calc() 函数 */
.example-calc {
    width: calc(100% - 20px); /* 设置宽度为容器宽度减去 20px */
}

/* 6. 使用 var() 函数 */
:root {
    --main-color: #3498db; /* 定义自定义属性 */
}
.example-var {
    color: var(--main-color); /* 使用自定义属性设置文本颜色 */
}

解释说明：

• rgb(): 用于定义颜色，参数为红、绿、蓝三个值，范围是 0 到 255。
• rgba(): 类似于 rgb()，但多了一个 alpha 通道，用于控制透明度，范围是 0 到 1。
• hsl(): 用于定义颜色，参数为色调（Hue）、饱和度（Saturation）、亮度（Lightness）。
• hsla(): 类似于 hsl()，但多了一个 alpha 通道，用于控制透明度。
• calc(): 用于执行简单的数学计算，例如加法、减法、乘法和除法。
• var(): 用于引用 CSS 自定义属性（变量），可以在整个样式表中重复使用。