css新属性

/* 示例代码：CSS新属性 */

/* 1. backdrop-filter */
body {
  backdrop-filter: blur(10px); /* 使背景模糊，但不影响前景内容 */
}

/* 解释：backdrop-filter 属性允许你对元素的背景应用图形效果（如模糊或颜色偏移）。这不会影响元素的内容，只会影响元素背后的区域。 */

/* 2. contain */
.container {
  contain: content; /* 控制容器内的布局、样式和绘制行为 */
}

/* 解释：contain 属性用于启用“包含”功能，它可以帮助浏览器优化性能。通过指定要包含的内容类型（如布局、样式或绘制），浏览器可以更好地管理资源并提高渲染效率。 */

/* 3. place-content */
.grid-container {
  display: grid;
  place-content: center; /* 简化了对齐方式，使网格项居中 */
}

/* 解释：place-content 是一个简写属性，用于同时设置 align-content 和 justify-content。它可以简化网格或弹性盒子布局中的对齐方式。 */

/* 4. scroll-behavior */
html {
  scroll-behavior: smooth; /* 平滑滚动效果 */
}

/* 解释：scroll-behavior 属性定义了滚动容器（如页面或元素）在滚动时的行为。smooth 值会使滚动变得平滑，而不是立即跳转到目标位置。 */