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

Question

查看围绕导航中心流动的径向渐变？让我假设我做了div导航。我如何创建一个看起来像图片的渐变？

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

Answer 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 */

这样它可以在每个现代浏览器中使用。

Answer 2

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

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

这是一个编辑器http://www.westciv.com/tools/radialgradients/index.html

Example

Answer 3

如果您想使用CSS执行此操作，可以使用radial gradient：

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

Example（jsFiddle）。

以上将在<div>的填充框中心创建一个半径为100px的圆形光晕。

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

（该示例仅适用于Chrome测试版，可能需要适当的供应商前缀咒语和其他浏览器的测试。）