Web 功能：
box-shadow
filter
mix-blend-mode
background-blend-mode
isolation
渐变
渐变插值
圆锥渐变
color-mix()
Oklab 和 OkLCh
@supports
自定义属性
aspect-ratio
深度和纹理
- 叠加多层阴影，打造逼真的柔和深度效果。
- 对于非矩形形状或透明 PNG，请使用
filter: drop-shadow()，而不是box-shadow。 - 使用
mix-blend-mode和background-blend-mode叠加光照效果（使用isolation: isolate限制范围）
.hero {
background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
background-blend-mode: soft-light;
}
渐变和 color-mix()
使用 in oklch 或 in oklab 明确指定渐变或 color-mix() 的插值色彩空间。
in oklch能更好地保留色度，但更容易超出设备色域，尤其是在颜色差异较大时in oklab更容易保持在色域内（假设端点在色域内），但可能会在中间产生褪色、不饱和的颜色，尤其是在相反色调之间进行插值时。- 请勿使用
in srgb，除非您有特定原因（例如，您正在构建需要在 srgb 中插值的颜色选择器）。
回退
2024 年之前的部分浏览器不支持渐变颜色插值空间。 如需支持这些浏览器，请定义一个变量，仅在可以安全使用令牌时才使用令牌：
:root {
--in-oklab: ;
--in-oklch: ;
}
@supports (linear-gradient(in oklab, white, black)) {
:root {
--in-oklab: in oklab;
--in-oklch: in oklch;
}
}
然后，按如下方式使用：
.card {
background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}
- 重要提示：如果您使用此方法，请确保始终有一个非空渐变前导，否则在旧版浏览器中会出现语法错误。
color-mix()不需要此权限。如果浏览器支持color-mix()，则也支持其in <color-space>参数。
图案
许多图案都可以通过 CSS 渐变 + 硬停点创建，这些图案比 SVG 或外部图片更灵活、性能更高，因为它们可以访问周围上下文中的 CSS 变量和长度。
您无需重复位置两次，只需使用 0 或 0%，渐变修正功能就会自动调整。
示例如下。
宽度各为 1em 的竖条纹：
background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;
斜条纹，每条宽度为 1em：
background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);
包含 1em 个方块的棋盘格图案：
background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;
波尔卡圆点，圆点半径为 .5em，间距为 2em（水平/垂直 - 乘以 sqrt(2) 即可得出对角线距离）：
--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);
简单饼图：
.pie {
--p: 80%;
width: 60px;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}
重要提示：使用渐变色渲染图表时，请确保为屏幕阅读器提供文本后备方案。强制性：您必须提供语义数据表作为无障碍替代方案，如无障碍编码指南中的替代文本和媒体指南所述。