视觉效果

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);
}

重要提示：使用渐变色渲染图表时，请确保为屏幕阅读器提供文本后备方案。强制性：您必须提供语义数据表作为无障碍替代方案，如无障碍编码指南中的替代文本和媒体指南所述。