CSS 是設計網站的工具之一。許多開發人員只了解 CSS 的基礎知識，他們花了數小時才弄好布局，或者設計出總覺得缺少點什么的設計。

但有一些特殊功能和隱藏的精華可以為您節省數小時的工作時間，并顯著改善您的代碼，使其更加完美。

以下可能是你沒有使用過，但絕對有用的 10 個 CSS 功能！

1. 創建布局

您是否曾嘗試過制作類似 Pinterest 的布局，而有的項目具有不同的高度？網格和彈性框經常會留下尷尬的間隙，看起來不太好看。

解決方法：使用 columns 屬性。

columns: 300px auto;

這會將您的內容拆分為響應式列。每列寬度至少為 300 像素，瀏覽器將根據屏幕尺寸決定適合多少列。沒有間隙，沒有壓力！

2. 明暗模式之間切換

用戶喜歡暗模式，但手動為每個元素編寫樣式可能會花很長時間。

解決方法：讓明暗功能處理它。

color: light-dark(#000, #fff);

這會根據用戶的設備主題自動更改文本顏色。在暗模式下，文本變為白色，在亮模式下，文本變為黑色。很簡單，對吧？

3. 懸停在多個項目上

您希望懸停效果不僅改變您懸停的元素，還改變其鄰居。

解決方法：使用同級選擇器。

.item:hover ~ .item { transform: scale(1.1); }

當您將鼠標懸停在一個 .item 上時，這將增加其右側所有項目的大小。如果您愿意，甚至可以調整左側項目的大小！

4. 修復圖層位置

調整屏幕大小時，具有多個重疊圖層的設計可能會變得混亂。元素四處移動，一切看起來都不對勁。

解決方法：使用 position: fixed。

position: fixed;

無論屏幕大小如何，這都能讓您的元素保持固定位置。對于像 Parallax 或任何具有大量圖層的設計來說，它非常方便。

5. 以 3D 形式旋轉對象

制作 3D 效果（如旋轉的汽水罐）通常需要 JavaScript 和大量工作。

解決方法：使用 CSS 旋轉。

transform: rotateY(var(--angle));

這會沿 Y 軸旋轉對象，使其看起來是 3D 的。更改 --angle 值，它就會旋轉！

6. 為 SVG 文本添加動畫

您希望 SVG 文本看起來像是寫出來的，但這似乎太復雜了。

解決方法：使用 stroke-dasharray。

stroke-dasharray: 100%; stroke-dashoffset: 0; animation: draw 2s linear;

這會使 SVG 文本的輪廓動起來，看起來就像是實時繪制的。效果很棒，而且做起來非常簡單！

7. 制作類似墨水的效果

您想創建一個看起來像潑灑的墨水或煙霧的酷炫效果，但僅使用 CSS 似乎無法實現。

解決方法：使用 mask-image 屬性。

mask-image: url('ink-mask.svg'); mask-size: cover;

這會將元素剪裁為蒙版圖像的形狀。要獲得墨水效果，只需使用墨水形狀的 SVG 或圖像作為蒙版即可。

8. 創建 3D 旋轉木馬

構建 3D 圖像滑塊聽起來很復雜，如果沒有 JavaScript 很難做到。

解決方法：使用 transform 和 rotateY。

transform: rotateY(calc(var(--index) * 90deg)) translateZ(500px);

這會將項目定位在 3D 空間中的圓圈內。更改 --index 值會使每個項目圍繞圓圈旋轉。

9. 刪除圖像背景

您需要刪除圖像的背景，但這聽起來像是 Photoshop 的工作。

解決方法：使用 mix-blend-mode。

mix-blend-mode: darken;

這會逐個像素地將圖像與其背景進行比較，并移除較亮的區域，使較暗的部分可見。它并不適用于所有圖像，但對許多圖像來說效果很好。

10. 在 Sprite 中制作動畫步驟

問題：您有一個 Sprite（具有多個幀的單個圖像），并且想要輕松地為其制作動畫。

解決方法：使用步驟計時功能。

animation-timing-function: steps(10);

這會將動畫分成相等的部分，使其看起來像精靈逐幀移動。非常適合創建跳躍或奔跑的動畫！

好了，10 個 CSS 單行代碼可以解決常見的設計問題！

這些代碼片段可能很小，但功能卻非常強大。試試看，看看你的設計變得有多簡單！如果你有任何問題或想法，請在留言中告訴我，我們一起學習進步。