@Function

calc()
rgba()
attr()
var()
clamp()
other

计算函数 calc()

说明

.利用 + - * / 四则运算的结果作为元素的CSS属性

.可以直接使用单位运算：绝对单位/像素）与相对单位/百分比/视口单位

.为了和负值区分开来，+和-这两个运算符两侧需要额外添加一个空格，否则会报错

.* 和 / 不需要空格，但考虑到统一性，推荐加上空格

.计算函数，使得CSS更像一门编程语言

calc(100% - 20px);

[] 定义根字体大小

.通常推荐一行最多容纳不超过30个字符，可以基于视口设置根元素的字体大小为视口宽度的一部分。

html {
    font-size: calc(100vw / 30);
}

[] 定义栅格

.如12分栅格,定义更清晰

.col {
    width: calc(100% / 12);
}

颜色函数 rgb() rgba()

.使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。

.红色（R）0 到 255 间的整数，代表颜色中的红色成分

.绿色（G）0 到 255 间的整数，代表颜色中的绿色成分

.蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分

.透明度（A）取值 0~1 之间，代表透明度

.推荐使用rbga()

属性函数 attr()

说明

.获取当前元素的属性值，在CSS样式中使用

.也可以用在伪类元素里；在伪类元素里使用，它得到的是伪元素的原始元素的值

.attr()属性通常和自定义属性 data- 配合使用

.attr()函数可以和任何CSS属性一起使用；使用较多的是伪元素的 content 属性

.还可以动态生成页面，实现部分js功能

[] attr()应用 - 开课啦

.title::after {
    content: attr(data-tip);
    //... ...
}

[] 换肤

.在边框border一节圆角导航实例的基础上进行

.获取元素

.修改元素属性

[]如何使用纯CSS实现?

[HTML]

<div>
  <button data-src="./imgs/1.jpg">1</button>
  <button data-src="./imgs/2.jpg">2</button>
  <button data-src="./imgs/3.jpg">3</button>
</div>
<div class="box">
  <img src="" alt="">
</div>

[CSS]

.active {
  background-color: #f40;
}

[Javascript]

let btns = document.querySelectorAll('button');
let img = document.querySelector('img');
btns.forEach(item => {
  item.addEventListener('click', () => {
    img.src = item.getAttribute('data-src');
    btns.forEach(btn => {
      btn.classList.remove('active');
    })
    item.classList.add('active');
  })
})

变量函数 var()

说明

.使用全局变量或内联变量

.变量以双--号开始，如--main-color

.通常配合calc()函数一起运算

var(custom-property-name[, value])

.custom-property-name：必需。自定义属性的名称，必需以 -- 开头

.value：可选。备用值，在属性不存在的时候使用

使用全局CSS变量

.如果变量定义在根选择器:root，则所有元素都可以使用-全局变量

.如果变量定义在某个选择器，则只有该选择器选中的元素和它的所有后代元素使用-局部变量

[] 定义并使用告警颜色

:root {
    --txt-wran-color: #c81623;
}

.wrap{
    --el-color: #890;
}

.warn {
    color: var(--txt-wran-color);
}

使用内联CSS变量

.利用style在元素上定义，仅供当前元素使用-内联变量

[] 渐变背景

[HTML]

<div class="fn-var">
    <div style="--alpha:0">0</div>
    <div style="--alpha:1">1</div>
    //...
    <div style="--alpha:8">8</div>
    <div style="--alpha:9">9</div>
</div>

[CSS]

.fn-var-bg div {
    background-color: rgba(255, 44, 00, calc(var(--alpha)*0.1));
}

[] 自适应布局-没有--left就使用48px；当元素left处于hover状态时，定义--left变量为30%

.grid {
  display: grid;
  transition: 300ms;
  grid-template-columns: var(--left, 48px) auto;
}

.grid:has(.left:hover) {
  --left: 30%;
}

[] 自定义图形

.在HTML中利用style属性为元素指定不同的旋转角度，在CSS中使用

.每个元素旋转120deg

.可以制作加载，参考实例 animation

[HTML]

<div class="fn-var">
    <span style="--rot:0"></span>
    <span style="--rot:1"></span>
    <span style="--rot:2"></span>
</div>

[CSS]

.fn-var-rot span {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 4px;
    margin: auto;
    background: #f40;
    transform: translateY(-50%) rotate(calc(var(--rot)*120deg));
}

限制比较函数 clamp()

说明

对 CSS 属性执行 min-width、max-width 等等操作，即：把一个值限制在一个下限min和上限max之间

函数接收三个参数：最小值、首选值、最大值；用逗号分隔；可以是表达式

当首选值比最小值要小时，则使用最小值

当首选值介于最小值和最大值之间时，用首选值

当首选值比最大值要大时，则使用最大值

.demo {
    font-size: clamp(14px, 100vw/30, 24px);
    width: clamp(100px, 100%, 200px);
}

更多信息，请参考实例响应式开发

其它函数

背景渐变函数: .线性渐变 linear-gradient(); .径向渐变 radial-gradient(); .锥向渐变 Conic-gradient(); 更多信息，请参考渐变背景
最大最小函数: .最小函数min(); .最小函数minmax()
选择器函数: :nth-child(); :nth-of-type(); :has(); :is(); :where(); 更多信息，请参考 selector

总结与作业 Summary & Homework

总结: .常见CSS函数的使用
作业: .使用函数优化个人网站，如定义颜色变量、使用颜色函数，添加并使用自定义属性