背景模式，通過圓錐梯度簡化

Firefox 現已支持圓錐漸變！本文將展示如何使用圓錐漸變簡化背景圖案。

Firefox 75 版本起，即可啟用圓錐漸變。方法是：訪問about:config ，找到layout.css.conic-gradient.enabled標誌，將其值設置為true （默認值為false ，雙擊即可切換）。啟用後，即可在Firefox 中測試包含圓錐漸變的CSS。

本文部分示例使用polyfill 也能正常工作，但有些示例在圓錐漸變中使用了CSS 變量，因此需要原生支持此功能。

圓錐漸變的一大優點是能夠簡化背景圖案。讓我們來看幾個十年前Lea Verou 創建的線性漸變圖案庫中的例子，看看如何使用圓錐漸變簡化它們。

金字塔圖案

原始圖案使用四個線性漸變：

 background:
  linear-gradient(315deg, transparent 75%, #d45d55 0) -10px 0,
  linear-gradient(45deg, transparent 75%, #d45d55 0) -10px 0,
  linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0,
  linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0 #561a16;
background-size: 20px 20px;

代碼冗長且難以理解。使用圓錐漸變，只需一個背景層即可實現相同效果：

 $s: 20px;
background:
  conic-gradient(from 45deg, 
    #561a16 25%, 
    #6a201b 0% 50%, 
    #a7332b 0% 75%, 
    #d45d55 0%) 
    50%/ #{$s $s};

代碼更簡潔，體積也從260 字節減少到103 字節，減少了一半以上。

棋盤圖案

原始圖案使用兩個線性漸變：

 background-color: #eee;
background-image:
  linear-gradient(45deg, black 25%, transparent 25%, 
    transparent 75%, black 75%, black),
  linear-gradient(45deg, black 25%, transparent 25%, 
    transparent 75%, black 75%, black);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;

使用圓錐漸變簡化後：

 $s: 60px;
background:
  repeating-conic-gradient(#000 0% 25%, #eee 0% 50%) 
    50%/ #{$s $s};

代碼體積從263 字節減少到73 字節，減少了70% 以上。

對角線棋盤圖案

原始圖案也使用兩個線性漸變：

 background-color: #eee;
background-image: 
  linear-gradient(45deg, black 25%, transparent 25%, 
    transparent 75%, black 75%, black),
  linear-gradient(-45deg, black 25%, transparent 25%, 
    transparent 75%, black 75%, black);
background-size: 60px 60px;

使用圓錐漸變簡化後：

 $s: 60px;
background:
  repeating-conic-gradient(from 45deg, 
    #000 0% 25%, #eee 0% 50%) 
  50%/ #{$s $s};

代碼體積從229 字節減少到83 字節，減少了近三分之二。

半菱形圖案

原始圖案使用四個線性漸變： (此處省略原始代碼和詳細解釋，保留核心結論)

使用圓錐漸變簡化後，代碼體積從343 字節減少到157 字節。

額外示例：相交線背景

圓錐漸變也能輕鬆實現原本需要多個線性漸變才能實現的效果。 (此處省略詳細解釋，保留核心結論)

總而言之，圓錐漸變可以顯著簡化背景圖案的CSS 代碼，提高代碼可讀性和效率。

以上是背景模式，通過圓錐梯度簡化的詳細內容。更多資訊請關注PHP中文網其他相關文章！