如何在导航周围创建径向渐变？答案

【问题标题】：How to create a radial gradient around navigation?如何在导航周围创建径向渐变？
【发布时间】：2011-11-06 05:23:21
【问题描述】：

看到围绕导航中心流动的径向渐变了吗？假设我制作了一个div，即导航。我将如何创建一个看起来像图片中的渐变？

注意：查看菜单背后的背景。

【问题讨论】：

在我看来像一个内部阴影/发光效果...
我知道如何在 Photoshop 中创建它，如果您是这样说的话。
@Yep - 看看：colorzilla.com/gradient-editor
@JaredFarrish：是的，我以前用过。我知道如何创建渐变本身，只是不知道如何将它放在导航 div 的中间。这就是我要问的。
您能展示一下您目前的成果吗？该网站上的一些示例与您上面的示例非常相似（我假设是玻璃效果）？

标签： html css

【解决方案1】：

如果您谈到导航背后的浅棕色光晕，您可以使用 CSS3...：http://jsfiddle.net/Jg8ZC/

  background: #45392d;
  background-repeat: no-repeat;
  background-image: -webkit-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* New WebKit syntax */  
  background-image: -moz-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%);  /* Firefox */  
  background-image: -ms-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* IE10+ */  
  background-image: -o-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* Opera (13?) */  
  background-image: radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%; /* standard syntax */

这样它就可以在每一个现代浏览器中工作。

【讨论】：

是的，这就是我正在寻找的东西。唯一的问题是在导航后面，而不是在页面中居中。
@是的：你可以使用ul.nav:before { position: absoulte; top:0; left: 0; width: 100%; height: 300px; z-index: -1; background: theGradients}
我会调查的，但这绝对是我想要做的。谢谢！
@Yep - 将background-position: num num; 添加到背景元素：jsfiddle.net/Jg8ZC/4
? 我来自未来告诉你它不再适用于所有现代浏览器。这些 contain 和 cover 关键字现已弃用：developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient#Values

【解决方案2】：

这不是径向渐变。它似乎是一个图形。

至于 CSS，请查看她的 http://www.the-art-of-web.com/css/radial-gradients/ 或 google。那里有很多资源

这里是编辑http://www.westciv.com/tools/radialgradients/index.html

Example

【讨论】：

我知道这是一个图形。使用一些 CSS，我可以轻松地将其从 Photoshop 中导出并将其设置为背景。然而，这不是我想要的。我想使用 -webkit-radial-gradient （或类似的）来创建该效果，中心位于导航 div 的中间。
注意，由于某种原因，它在 FF7 中不起作用，但在 Chrome（最新）中可以正常工作。

【解决方案3】：

如果你想用 CSS 做这个，你可以使用radial gradient:

background-image: -webkit-radial-gradient(contain, #bf8230 0%, #a65f00 100px);

Example (jsFiddle)。

上面将创建一个以<div> 为中心的半径为 100px 的圆形发光。

如果你想“围绕”一个元素发光，你可以将一个具有半透明渐变背景的元素嵌套在一个具有纯色背景的元素中，如this example。您必须确保嵌套元素不会填充其容器，并且它的填充框可以包含整个发光，否则它将显示为“被切断”。

（该示例仅针对 Chrome Beta 完成，可能需要适当的供应商前缀咒语并针对其他浏览器进行测试。）

【讨论】：