CSS 特性示例

aspect-ratio（宽高比）

控制元素的宽高比，常用于响应式图片和视频。

调整宽高比：

div {
  aspect-ratio: 16/9;
}

gap（间距）

设置网格或弹性布局中元素之间的间距。

调整间距：

div {
  gap: 1rem;
}

counter-reset 和 counter-increment（计数器）

创建自定义编号和计数。

介绍

特性

总结

.counter-demo {
  counter-reset: section;
}
.counter-item::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

@supports（特性检测）

检测浏览器是否支持某个 CSS 特性。

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

currentColor（当前颜色）

使用当前元素的文本颜色。

边框颜色继承自文本颜色

.element {
  color: blue;
  border: 2px solid currentColor;
}

scroll-behavior（滚动行为）

定义滚动行为是平滑还是即时。

html {
  scroll-behavior: smooth;
}

::backdrop 伪元素

为对话框等全屏元素提供背景遮罩。

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

text-underline-offset（下划线偏移）

控制文本下划线的位置。

调整下划线偏移：示例文本

a {
  text-underline-offset: 4px;
}

line-clamp（多行文本截断）

限制文本显示的行数。

调整行数：

这是一段很长的文本，用来演示 line-clamp 属性的效果。这是一段很长的文本，用来演示 line-clamp 属性的效果。这是一段很长的文本，用来演示 line-clamp 属性的效果。这是一段很长的文本，用来演示 line-clamp 属性的效果。这是一段很长的文本，用来演示 line-clamp 属性的效果。

.element {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}