如何在导航周围创建径向渐变? [英] 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屋!
查看全文