如何在导航周围创建径向渐变？ [英] How to create a radial gradient around navigation?

问题描述

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

See the radial gradient flowing around the center of the navigation? Lets suppose I made a div that is the navigation. How would I create a gradient that looks like in the picture?

注意：查看菜单背景 。

Note: Look at the background behind the menu.

推荐答案

如果您谈到导航后面的浅褐色发光，您可以使用CSS3做到这一点： http://jsfiddle.net/Jg8ZC/

If you talk about the lighter brown glow that is behind the navigation you can do this with 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 */

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

This way it will work in every modern browser.

这篇关于如何在导航周围创建径向渐变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！