CSS 里的斜杠 /：你可能忽略的小细节

在日常写 CSS 时，很多人以为 / 只是数学除号，或者是可以随便用来分隔的符号。但实际上，它在 CSS 中有两种很重要的用法：

我们一起来看看常见的场景。

1. 斜杠作为分隔符

有些 CSS 简写属性的语法，必须用 / 来区分不同部分，否则浏览器就分不清。

css 复制代码

p {
  font: 16px/1.5 "Arial", sans-serif;
}

这里的 16px/1.5 表示 字号是 16px，行高是 1.5 。如果你把 / 去掉写成 16px 1.5，浏览器会直接报错。

css 复制代码

.card {
  border-radius: 50% / 30%;
}

这里 / 的意思是 横向半径 50%，纵向半径 30% ，结果就是一个椭圆角。

如果没有 /，写成 50% 30%，那就成了「左上=50%，右上=30%，右下=50%，左下=30%」，完全不同的效果。

css 复制代码

.item {
  grid-area: 1 / 2 / 3 / 5;
}

这里的四个数字依次是：行起点 / 列起点 / 行终点 / 列终点 。

每个 / 把行和列的定义分隔开，否则就混淆了。

css 复制代码

.hero {
  background: url(bg.jpg) center / cover no-repeat;
}

这里 center / cover 的意思是：位置居中，尺寸为 cover 。

如果没有 /，浏览器会把 cover 当成颜色或其他属性，结果完全不对。

css 复制代码

.box {
  border-image: url(border.png) 30 / 12 / 6 stretch;
}

这里的 / 分别把 slice / width / outset 分开。少一个斜杠就会解析出错。

除了分隔符，/ 还可以真正做「数学」。

css 复制代码

.video {
  aspect-ratio: 16 / 9;
}

这是最常见的用法，16 / 9 就等于「16:9 的宽高比」。

css 复制代码

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

这里 100% / 3 表示把父容器宽度平均分成三份。

要注意：只能用数字去除单位值 ，像 1rem / 2rem 是不合法的。

可以把 CSS 里的 / 记成两类：

分隔符：用在简写属性里，把不同语义的值分开。
- 代表场景：font、border-radius、grid-area、background、border-image、mask
比例/除法：用在需要算比例或分配空间的地方。
- 代表场景：aspect-ratio、calc()

一句口诀：

👉 在简写里，/ 是语法规定的"隔板"；在计算里，/ 是数学里的"除法"。