CSS函数

自定义属性

var

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

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

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

<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属性获取字符串且不支持默认值)

<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支持加减乘除运算,但乘除运算不可两数都带单位

: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

仅Firefox与Safari兼容

响应式布局函数

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介于max与min之间)

min(200px, 50%)

max(300px, 50%)

clamp(300px, 50%, 350px)

minmax

列表函数