#CSS #前端 #新特性 #tip

虽然发过那么多次 CSS 新特性的博文推荐，但是在项目中实际用上的没那么多，决定开个新 tag 记录一下平常真在项目里用上了的小 tip！

CSS scroll-state 用来渐进式的增强滚动容器底部的羽化遮罩时还是很好用的～

refs:
1. Adaptive Alerts (a CSS scroll-state Use Case)
2. CSS @container scroll-state 容器滚动查询
3. Chrome 133 Goodies

 /* https://github.com/parcel-bundler/lightningcss/issues/887 */
  .scroll-feather-mask {
    container-type: scroll-state;
  }
  @container scroll-state(scrollable: bottom) {
    .scroll-feather-mask::before {
      content: '';
      background: linear-gradient(to bottom, transparent 0%, var(--gradient-bg-start) 70%, var(--gradient-bg-start) 100%);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      display: block;
      height: 5rem;
    }
  }