Question

如何使用CSS3（-webkit-radial-gradient）为创建径向渐变而不使用？所以我要说我有一个圆圈：

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

如何为此圆绘制径向渐变？

编辑：我想在没有任何外部库的情况下执行此操作。我也基于颜色停止创建渐变。例如（0,255）。

Answer 1

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

您可以创建svg file with a radial gradient，并使用background-image: url()
您可以创建渐变的png或jpg，并按照与上面相同的方式设置

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

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

修改：Here's a fiddle so you can see it in action。由于数据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>

您可以修改色标，然后使用this tool

Answer 2

截至目前，径向渐变没有标准化或广泛支持的语法。

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

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

径向渐变

2 个答案: