如何在導航周圍創建徑向漸變？

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/或在google中。 那里有很多資源

這是一個編輯器http://www.westciv.com/tools/radialgradients/index.html

例

Answer 3

如果要使用CSS進行此操作，可以使用徑向漸變 ：

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

示例 （jsFiddle）。

上面的代碼將在<div>的padding-box中創建一個半徑為100px的圓形發光。

如果要在元素周圍“發光”，可以將具有半透明漸變背景的元素嵌套在具有純色背景的元素內，如本例所示 。 您必須確保嵌套元素沒有填充其容器，並且其填充框可以包含整個發光，否則它將顯示為“ cut off”。

（該示例僅針對Chrome Beta才完成，可能需要適當的供應商前綴提示並針對其他瀏覽器進行測試。）