函数@Function

颜色函数 rgb()

Overview

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

. 红色(R)：0 到 255 间的整数，代表颜色中的红色成分

. 绿色(G)：0 到 255 间的整数，代表颜色中的绿色成分

. 蓝色(B)：0 到 255 间的整数，代表颜色中的蓝色成分

. 透明度(A)：取值 0~1 之间，代表透明度

. 更多信息，请参考 rgb()

rbga() 是 rgb() 的别名- an alias for rgb()；推荐使用 rgb() - recommended to use rgb()

[] 定义透明色

:root{
  --base-color: 255, 68, 0;
  --warn-color: rgb(var(--base-color), 1);
  --warn-color-light: rgb(var(--base-color), 0.05);
}

属性函数 attr()

Overview

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

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

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

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

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

. 更多信息，请访问 MDN - attr()

[] attr() 应用 - 开课啦

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

[] 换肤

. 获取元素

. 修改元素属性

[]如何使用纯 CSS 实现?

<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>

.active {
  background-color: #f40;
}

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()

Overview

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

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

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

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

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

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

. 更多信息，请访问 MDN - var()

使用全局CSS变量

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

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

[] 定义并使用告警颜色

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

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

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

使用内联 CSS 变量

. 利用 style 在元素上定义，仅供当前元素使用

[] 渐变背景

<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>

.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

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

.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));
}

计算函数 calc()

Overview

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

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

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

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

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

. 更多信息，请访问 MDN - calc()

calc(100% - 20px);

[] 定义根字体大小

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

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

[] 定义栅格

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

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

限制比较函数 clamp()

Overview

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

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

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

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

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

. 最大值和最小值一般都是固定值；而首选值是动态的

. 更多信息，请访问 MDN - clamp()、响应式开发

[]字体跟着视口宽度变换，通过钳制避免字体过大

html {
    font-size: clamp(14px, 100vw/30, 24px);
    width: clamp(1024px, 100%, 1200px);
}

其它函数

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

Summary & Homework

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