背景模式，通过圆锥梯度简化

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中文网其他相关文章！