让你的 CSS 看起来更专业 10 倍：这 11 个你可能错过的不常用技巧

Source: Dev.to

CSS 是那种表面看起来很简单的东西……直到你尝试构建一些看起来不像是 2009 年设计的作品。大多数人只学会了基础——margin、padding、display: flex——然后就止步不前。这也是为什么很多网站看起来……平平无奇。

如果说 HTML 是网络的骨架，CSS 就是它的个性。它决定了“这能用”和“这看起来像真正的产品”之间的差距。
所以，让我们来改变这种状况。

11 个被低估的 CSS 小技巧

1. aspect-ratio – 停止为图片尺寸争斗

不必再用 padding 的技巧来 hack，只需直接定义比例。

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

非常适合卡片、视频以及响应式布局。

2. clamp() – 无需媒体查询的响应式尺寸

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

在最小值和最大值之间平滑缩放。

3. scroll-snap-type – 让滚动体验更高级

.container {
  scroll-snap-type: x mandatory;
}

非常适合轮播图和全屏章节。

4. backdrop-filter – 立即实现玻璃拟态

.glass {
  backdrop-filter: blur(10px);
}

呈现出现代 UI 中常见的磨砂玻璃效果。

5. :is() – 立刻让选择器更简洁

:is(h1, h2, h3) {
  margin-bottom: 1rem;
}

减少重复，提高 CSS 可读性。

6. gap 与 Flexbox – 不再用 margin 处理所有间距

.container {
  display: flex;
  gap: 1rem;
}

比手动给子元素加间距更简洁。

7. object-fit – 永久解决图片变形

img {
  object-fit: cover;
}

再也不会出现拉伸或压扁的图片。

8. position: sticky – 被低估的布局能力

nav {
  position: sticky;
  top: 0;
}

感觉像是 JavaScript 的魔法，但它纯粹是 CSS。

9. min() / max() – 更智能的响应式尺寸

width: min(90%, 600px);

防止布局变得过大或过小。

10. will-change – 更流畅的动画

.card {
  will-change: transform;
}

帮助浏览器提前优化动画。（请适度使用，别到处滥用。）

11. accent-color – 立即为原生表单控件设色

input {
  accent-color: #6c5ce7;
}

复选框、单选框和滑块终于可以匹配你的设计风格。

大多数开发者并不是缺乏创意——他们只是不了解 CSS 已经具备的能力。这些特性不需要库、框架或 hack，直接内置于浏览器。恰当地使用它们，立刻能把“新手 UI”与“像真正产品一样的体验”区分开来。