关于双色导航栏问题

   最近项目中遇到了双色导航栏,想了很多办法,各种position定位以及浮动,总是无法双侧无法延长,最后想到了css中的渐变,将父级元素background设置为渐变.

.nav {

height: 140px;width: 100%;background: -webkit-linear-gradient(left, #a2ce23 , #a2ce23 , #505b84 , #505b84); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(right, #a2ce23 , #a2ce23 , #505b84 , #505b84); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(right, #a2ce23 , #a2ce23 , #505b84 , #505b84); /* Firefox 3.6 - 15 */background: linear-gradient(to right, #a2ce23 , #a2ce23 , #505b84 , #505b84); /* 标准的语法 */

这样左侧右侧分别设置渐变两端的颜色,就解决问题.