CSS函数

本文最后更新于:2023年2月6日 下午

自定义属性

var

var()函数用于获取自定义属性值

CSS3使用双横线开头声明自定义属性(大小写敏感),自定义属性属性值可以是任何的CSS属性值

可使用var函数与属性选择器来实现主题切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
<p class="func-var">Var函数</p>
</div>

<style>
:root {
--color-bg: #fff;
--color-font: #000;
}

[data-user-color-scheme="dark"] {
--color-bg: #787;
--color-font: #fff;
}

.func-var {
background-color: var(--color-bg);
color: var(--color-font);
}
</style>

Var函数

attr

attr函数可以获取元素标签的属性值(目前浏览器只支持伪元素content属性获取字符串且不支持默认值)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.func-attr-container {
/* 不支持 */
background-color: attr(data-color-bg color, #eee);
}

.func-attr::before {
content: attr(data-prefix);
}
</style>

<div data-color-bg="#f00" class="func-attr-container">
<p data-prefix="🌈" class="func-attr">
content: attr(data-prefix);
</p>
</div>

content: attr(data-prefix);

实验用法:

attr | MDN

数学函数

calc

calc()函数用于对CSS数值进行计算,可支持不同的尺寸单位混合运算(不支持20deg - 10px异种单位混合),也支持对var()获取的值进行计算

calc支持加减乘除运算,但乘除运算不可两数都带单位

1
2
3
4
5
6
7
:root {
--width-aside: 100px;
}

main {
width: calc(100% - var(--width-aside));
}

width: 100%

width: 100pxwidth: calc(100% - 100px)

三角函数

sin,cos,tan

asin,acos,atan,atan2

FirefoxSafari兼容

响应式布局函数

min

min(1rem, 10px, 3vh, 20%, [...])函数返回最小值

max

max(1rem, 10px, 3vh, 20%, [...])函数返回最大值

clamp

clamp(min, default, max)返回

  • min(default小于min)
  • max(default大于min)
  • default(default介于maxmin之间)

min(200px, 50%)

max(300px, 50%)

clamp(300px, 50%, 350px)

minmax

列表函数


CSS函数
https://qingshaner.com/CSS函数/
作者
清山
发布于
2022年11月23日
许可协议