javascript - 径向渐变

Question

如何在不使用 CSS3 ( -webkit-radial-gradient) 的情况下为圆形创建径向渐变？所以可以说我有一个圈子：

#circle {
    height: 200px;
    width: 200px;
    border-radius: 50%;
}

你如何为这个圆画一个径向渐变？

编辑：我想在没有任何外部库的情况下做到这一点。此外，我正在创建基于色标的渐变。例如（0,255）。

Answer 1

您可以使用以下几种方法：

1. 您可以创建一个带有径向渐变的 svg 文件，并将其设置为背景使用background-image: url()
2. 可以创建渐变的png或jpg，设置方法同上

如果您不想使用外部文件，则可以对其进行 base64 编码并使用数据 url。

您可以使用background-size: contain使渐变适合自己的圆形（或椭圆！）的大小，只需确保使渐变具有足够高的分辨率，使其永远不会像素化。

编辑：这是一个小提琴，所以你可以在行动中看到它。由于数据 url 是编码的，这里是 svg 文件的来源：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512px" height="512px" viewBox="-256 -256 512 512"
  xmlns="http://www.w3.org/2000/svg" version="1.1" >
<defs>
  <radialGradient id="grad" cx="50%" cy="50%" r="50%">
    <stop stop-color="white" offset="0%"/>
    <stop stop-color="black" offset="100%"/>
  </radialGradient>
</defs>
<circle r="256px" fill="url(#grad)" />
</svg>

您可以修改色标，然后使用此工具重新编码数据 uri

Answer 2

到目前为止，径向渐变还没有标准化或广泛支持的语法。

使用 CSS 执行此操作的最佳选择是使用 CSS 生成器（例如http://westciv.com/tools/radialgradients/或http://www.colorzilla.com/gradient-editor/）。这些站点为您处理为每个不同浏览器编写语法。如果您使用的是 LESS 或 SASS，您还可以考虑获得一个混合来为您处理变化。

如果浏览器特定的 CSS 不适合您，最好的选择是创建背景图像（无论是 PNG 或 SVG 文件）。