視覺效果

網頁功能： 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 較容易保持在色域內 (假設端點在色域內)，但可能會在中間產生褪色、飽和度降低的顏色，尤其是在相反色調之間內插時。
  • 除非有特定原因 (例如建構需要在 srgb 中插補的顏色挑選器)，否則請勿使用 in 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);
}

重要事項：使用漸層呈現圖表時，請務必為螢幕閱讀器提供文字備用方案。強制規定：您必須提供語意資料表做為無障礙替代方案，詳情請參閱無障礙程式碼編寫指南中的替代文字和媒體指南。