配合shape()函数，你可以画出任意形状的边框，就像SVG路径一样灵活，但完全用CSS语法描述 。

这意味着什么？

• 不用再为特殊边框切图

• 不用再叠加伪元素hack

• 所有缩放、响应式都自动适配

攻城狮惊呼：  “所以设计师给的异形边框，现在能1:1还原了？”

3. attr()函数进化：终于能读属性值了，不用data-*了

attr()函数存在了15年，但一直只能用在content属性里，只能读字符串，只能用在伪元素上 。

2026年，它彻底解放了 ：

/* 从data-*属性读取数字 */
.timer {
  --seconds: attr(data-seconds number);
  animation: countdown calc(var(--seconds) * 1s) linear;
}


/* 从href读取颜色？也行！ */
a[data-color] {
  background-color: attr(data-color color, #0066cc);
  /* 第二个参数是fallback值 */
}


/* 甚至能从HTML属性读长度 */
.progress-bar {
  width: attr(data-progress %, 0%);
}

惊不惊喜？  类型转换、默认值、任意属性、任意CSS值类型——全都支持了 。

攻城狮惊呼：  “所以以后进度条可以直接在HTML里写data-progress='50'，CSS自动读取？不用JS操作DOM了？”

4. 滚动状态查询：终于知道“粘住”和“滚动中”了

以前想知道元素有没有粘住、有没有被滚动捕捉到，得用Intersection Observer，监听scroll事件，一堆性能杀手代码 。

现在，CSS原生检测滚动状态 ：

甚至可以检测“用户是否正在滚动” ：

.scroll-container {
  container-type: scroll-state;
  
  /* 正在滚动时显示滚动提示 */
  @container scroll-state(scrolled: inline) {
    .scroll-hint { opacity: 1; }
  }
}

攻城狮惊呼：  “所以以前用Intersection Observer监听‘元素出现’的代码，现在全用CSS写了？”

5. 媒体元素伪类：终于能知道视频在播放还是暂停了

以前想根据音频/视频的播放状态改变样式，只能靠JS监听事件、动态加class。现在，浏览器原生告诉你 ：

video {
  border: 4px solid transparent;
  transition: border-color 0.3s;
}


/* 正在播放时 */
video:playing {
  border-color: #00cc66;
}


/* 暂停时 */
video:paused {
  border-color: #ff9900;
}


/* 缓冲时 - 显示加载提示 */
video:buffering::after {
  content: "加载中...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
}


/* 静音时显示图标 */
video:muted::before {
  content: "🔇";
  font-size: 24px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

参考文章：原文链接​