css中的fill有什么应用场景？

在 CSS 中，fill 属性主要用于控制 SVG 元素中图形的填充颜色。它不适用于常规的 HTML 元素。

以下是 fill 的一些常见应用场景：

• 改变 SVG 图标颜色: 这是 fill 最常用的场景。你可以使用任何有效的 CSS 颜色值，包括颜色名称（如 red、blue）、十六进制值（如 #FF0000）、RGB 值（如 rgb(255, 0, 0)）、HSL 值等，来改变 SVG 图标的颜色。这使得 SVG 图标可以很容易地适应不同的主题和样式。

• 创建渐变填充: fill 属性不仅可以接受单一的颜色值，还可以接受渐变值，例如 linear-gradient() 或 radial-gradient()。这允许你创建更复杂的视觉效果，例如在图标内部创建渐变效果。

• 应用图案填充: 你可以使用 url() 函数将 SVG 图案应用于 fill 属性。这可以创建重复的纹理或图案填充效果。

• 实现动态颜色变化: 结合 JavaScript 或 CSS 变量（CSS Custom Properties），你可以动态地修改 fill 属性的值，实现例如鼠标悬停时的颜色变化、根据用户操作改变图标颜色等交互效果。

• 继承父元素颜色: 如果将 fill 设置为 currentColor，则 SVG 元素将继承其父元素的 color 属性值。这可以简化样式管理，并确保图标与周围文本颜色保持一致。

• 控制透明度: 你可以使用半透明颜色值或 opacity 属性来控制填充的透明度。

示例：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
  <rect x="10" y="10" width="80" height="80" fill="url(#myGradient)" />
  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="blue" />
      <stop offset="100%" stop-color="green" />
    </linearGradient>
  </defs>
</svg>

在这个例子中，第一个圆形使用红色填充，第二个矩形使用线性渐变填充。

总而言之，fill 属性是控制 SVG 图形填充颜色的关键属性，它提供了丰富的颜色和填充选项，使得 SVG 图形更加灵活和易于定制。 记住，它只适用于 SVG 元素，对 HTML 元素无效。