Web学习网站

Appearance

CSS 函数 ​

CSS 函数允许在样式表中执行计算、调整颜色、创建渐变等操作。它们为 CSS 提供了更强大的功能，使开发者能够创建更复杂和动态的样式效果。

数学函数 ​

calc() ​

[calc()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数允许在 CSS 中进行数学计算。

css
.element {
  width: calc(100% - 40px);
  height: calc(50vh - 20px);
  font-size: calc(1rem + 1vw);
  padding: calc(1em + 5px);
}

.grid-item {
  width: calc((100% - 30px) / 3);
}

支持的运算符：

  • + 加法
  • - 减法
  • * 乘法
  • / 除法

注意事项：

  • 运算符前后必须有空格
  • 除数不能为 0
  • 可以混合使用不同单位

min() ​

[min()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数选择一组值中的最小值。

css
.element {
  font-size: min(20px, 2em, 3vw);
  width: min(500px, 80%);
}

max() ​

[max()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数选择一组值中的最大值。

css
.element {
  font-size: max(16px, 1.2em);
  width: max(300px, 50%);
}

clamp() ​

[clamp()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数将值限制在最小值和最大值之间。

css
.element {
  font-size: clamp(16px, 2em, 24px);
  /* 等同于 max(16px, min(2em, 24px)) */
  width: clamp(300px, 50%, 800px);
}

颜色函数 ​

rgb() 和 rgba() ​

[rgb()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 和 [rgba()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数定义 RGB 颜色。

css
.element {
  color: rgb(255, 0, 0); /* 红色 */
  background: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

hsl() 和 hsla() ​

[hsl()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 和 [hsla()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数定义 HSL 颜色。

css
.element {
  color: hsl(0, 100%, 50%); /* 红色 */
  background: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
}

hwb() ​

[hwb()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数使用色相、白度和黑度定义颜色。

css
.element {
  color: hwb(0 0% 0%); /* 红色 */
  background: hwb(120 20% 10%); /* 绿色 */
}

lab() 和 lch() ​

[lab()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 和 [lch()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数使用更现代的颜色空间定义颜色。

css
.element {
  color: lab(50% 20 30);
  background: lch(50% 50 120);
}

color-mod() ​

[color-mod()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数修改现有颜色的属性（目前浏览器支持有限）。

css
.element {
  color: color-mod(red alpha(50%));
  background: color-mod(blue tint(30%));
}

渐变函数 ​

linear-gradient() ​

[linear-gradient()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数创建线性渐变。

css
.element {
  background: linear-gradient(to right, red, blue);
  background: linear-gradient(45deg, red, blue, green);
  background: linear-gradient(to bottom, 
    red 0%, 
    orange 20%, 
    yellow 40%, 
    green 60%, 
    blue 80%, 
    purple 100%);
}

radial-gradient() ​

[radial-gradient()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数创建径向渐变。

css
.element {
  background: radial-gradient(red, blue);
  background: radial-gradient(circle, red, blue);
  background: radial-gradient(ellipse at center, red 0%, blue 100%);
}

conic-gradient() ​

[conic-gradient()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数创建圆锥渐变。

css
.element {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  background: conic-gradient(from 45deg, red, blue);
}

repeating-linear-gradient() ​

[repeating-linear-gradient()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数创建重复线性渐变。

css
.element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 10px,
    blue 10px,
    blue 20px
  );
}

repeating-radial-gradient() ​

[repeating-radial-gradient()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数创建重复径向渐变。

css
.element {
  background: repeating-radial-gradient(
    circle,
    red,
    red 10px,
    blue 10px,
    blue 20px
  );
}

变换函数 ​

translate() ​

[translate()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数移动元素。

css
.element {
  transform: translate(50px, 30px);
  transform: translateX(50px);
  transform: translateY(30px);
}

scale() ​

[scale()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数缩放元素。

css
.element {
  transform: scale(1.5);
  transform: scaleX(1.2);
  transform: scaleY(0.8);
}

rotate() ​

[rotate()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数旋转元素。

css
.element {
  transform: rotate(45deg);
  transform: rotateX(45deg);
  transform: rotateY(45deg);
}

skew() ​

[skew()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数倾斜元素。

css
.element {
  transform: skew(30deg);
  transform: skewX(30deg);
  transform: skewY(15deg);
}

形状函数 ​

circle() ​

[circle()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数创建圆形。

css
.element {
  clip-path: circle(50% at center);
  clip-path: circle(100px at 200px 100px);
}

ellipse() ​

[ellipse()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数创建椭圆。

css
.element {
  clip-path: ellipse(25% 40% at center);
}

inset() ​

[inset()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数创建矩形。

css
.element {
  clip-path: inset(20px 30px 10px 40px round 10px);
}

polygon() ​

[polygon()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数创建多边形。

css
.element {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

网格函数 ​

repeat() ​

[repeat()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数重复网格轨道。

css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
}

minmax() ​

[minmax()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数定义网格轨道的最小和最大尺寸。

css
.grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr);
}

fit-content() ​

[fit-content()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数将轨道大小调整为内容大小。

css
.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
}

其他有用函数 ​

attr() ​

[attr()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数获取元素属性值。

css
a::after {
  content: " (" attr(href) ")";
}

.progress::before {
  content: attr(data-progress) "%";
}

counter() ​

[counter()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数用于创建计数器。

css
ol {
  counter-reset: list-counter;
}

li {
  counter-increment: list-counter;
}

li::before {
  content: counter(list-counter) ". ";
}

var() ​

[var()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数使用 CSS 自定义属性。

css
:root {
  --main-color: #3498db;
}

.element {
  color: var(--main-color);
  background: var(--secondary-color, #eee); /* 带默认值 */
}

env() ​

[env()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 函数获取用户代理定义的环境变量。

css
.element {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

实际应用示例 ​

响应式字体大小 ​

css
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

动态渐变背景 ​

css
.gradient-bg {
  background: linear-gradient(
    45deg,
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%)
  );
}

自适应网格布局 ​

css
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

动态阴影 ​

css
.dynamic-shadow {
  box-shadow: 0 calc(0.5rem * var(--shadow-depth, 1)) 
              calc(1rem * var(--shadow-depth, 1)) 
              rgba(0, 0, 0, 0.1);
}

复杂几何形状 ​

css
.star {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

自定义进度条 ​

css
.progress-bar {
  height: 20px;
  background: linear-gradient(
    to right,
    #4caf50 0%,
    #4caf50 calc(100% * var(--progress, 0)),
    #e0e0e0 calc(100% * var(--progress, 0)),
    #e0e0e0 100%
  );
}

浏览器兼容性 ​

  • [calc()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 在 IE9+ 支持
  • [min()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js), [max()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js), [clamp()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 在较新的浏览器中支持
  • 颜色函数在现代浏览器中有不同程度的支持
  • 渐变函数在 IE10+ 支持
  • [var()](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 在 IE 不支持

最佳实践 ​

  1. 渐进增强：为不支持某些函数的浏览器提供备选方案
  2. 性能考虑：避免在动画中使用复杂的函数
  3. 可读性：在复杂函数中使用换行和缩进提高可读性
  4. 测试兼容性：在目标浏览器中测试函数支持情况
  5. 合理使用：不要过度使用函数，保持代码简洁

总结 ​

CSS 函数为样式表提供了强大的功能，使开发者能够创建更动态和复杂的视觉效果。掌握这些函数可以帮助我们编写更灵活、更可维护的 CSS 代码。随着浏览器支持的不断改进，这些函数在现代 Web 开发中变得越来越重要。