css函数有哪些？css函数大全

栏目： CSS 发布时间：2023-12-18

CSS，全称“层叠样式表”（Cascading Style Sheets），是用于描述HTML或XML（包括如SVG、MathML等衍生语言）文档的呈现样式的样式表语言。

CSS中定义了许多函数，它们可以用于动态地计算长度值、获取标签属性等。

CSS 函数有哪些？

CSS函数主要有calc、attr、linear-gradient、radial-gradient、matrix、translate、rotate、scale、skew等。下面逐一介绍一下各个CSS函数：

calc() 函数

这个函数用于动态地计算长度值，它接受一个数学表达式作为参数，这个数学表达式可以是简单的算术运算，如加、减、乘、除等。

实例：

.box {
    width: calc(100% - 20px); 
}

表示 .box 元素的宽度为父元素宽度的100%减去20像素。

attr() 函数

这个函数用于获取标签的属性值，参数是属性名，不用加引号。

attr() 函数实例一：

background-color: attr(data-color); 表示元素的背景色为data-color属性的值。

<style>
    .box {
        background-color: attr(data-color);
    }
</style>
<div class="box" data-color="red"></div>

结果等价于：

<style>
    .box {
        background-color: red;
    }
</style>
<div class="box"></div>

attr() 函数实例二：

attr(href) 获取到 href 属性的值。

<style>
    a::after {
        content: attr(href);
    }
</style>
<a href="https://www.tides.cn"></a>

结果等价于：

<a href="https://www.tides.cn">https://www.tides.cn</a>

linear-gradient() 函数

用于创建一个线性渐变背景，可以定义渐变的方向、颜色等。

实例：

#box {
  background-image: linear-gradient(red, yellow, blue);
}

radial-gradient() 函数

用于创建一个径向渐变背景，可以定义渐变的中心点、颜色等。

#box {
  background-image: radial-gradient(red, yellow, blue);
}

matrix() 函数

用于进行2D变换矩阵操作，可以实现对元素的位置、大小、角度等的变换。

translate() 函数

用于移动元素的位置，可以定义移动的横向和纵向距离。

.box {
    transform: translate(-50%, -50%);
}

rotate() 函数

用于旋转元素的角度，可以定义旋转的角度。

.box {
    transform: rotate(90deg);
}

scale() 函数

用于缩放元素的大小，可以定义缩放的比例。

.box {
    transform: scale(1.2);
}

对应的还有 scaleX、scaleY：

.box {
    transform: scaleX(1.2);
}

.box {
    transform: scaleY(1.2);
}

skew() 函数

用于倾斜元素的角度，可以定义倾斜的角度。

.box {
    transform: skew(15deg, 30deg);
}

对应的还有 skewX、skewY：

.box {
    transform: skewX(15deg);
}

.box {
    transform: skewY(30deg);
}

max() 函数

max 函数，顾名思义，取几个数中的最大值

.box {
  width: max(100%, 750px);
}

min() 函数

min 函数，顾名思义，取几个数中的最小值

.box {
  width: min(100%, 400px);
}

以上就是一些常用的CSS函数，它们可以帮助我们实现动态的计算、获取属性值、创建渐变背景、进行变换操作等。在实际开发中，我们可以根据需要选择合适的函数来实现相应的效果。

本文地址：https://www.tides.cn/p_css-functions

标签：函数

css函数有哪些？css函数大全