<p class="sycode"> </p> <p class="sycode"> </p> <p class="sycode"> 经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景。 <br> <br>下面是当前五大浏览器对 gradient 的支持 <br> </p> <p class="sycode"> </p> <p class="sycode"> </p> <p class="sycode"> Css代码 </p> <ol> <li><style> </style></li> <li> </li> <li>#gradient { </li> <li> </li> <li>width: 200px; </li> <li> </li> <li>height: 200px; </li> <li> </li> <li>/* 如果浏览器不支持渐变,使用图像作为背景 */ </li> <li> </li> <li>background: url(gradient.jpg); </li> <li> </li> <li>/* Webkit: Safari 4-5, Chrome 1-9 */ </li> <li> </li> <li>background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6600), to(#339900)); </li> <li> </li> <li>/* Webkit: Safari 5.1+, Chrome 10+ */ </li> <li> </li> <li>background: -webkit-linear-gradient(top, #ff6600, #339900); </li> <li> </li> <li>/* Firefox 3.6+ */ </li> <li> </li> <li>background: -moz-linear-gradient(top, #ff6600, #339900); </li> <li> </li> <li>/* Opera 11.10+ */ </li> <li> </li> <li>background: -o-linear-gradient(top, #ff6600, #339900); </li> <li> </li> <li>/* IE 10 */ </li> <li> </li> <li>background: -ms-linear-gradient(top, #ff6600, #339900); </li> <li> </li> <li>/* IE </li> <li> </li> <li>/* 注意:这一行必须写在最后 */ </li> <li> </li> <li>FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);} </li> <li> </li> </ol> <br> <p class="sycode"> </p> <p class="sycode"> </p> <p class="sycode"> Html代码 </p> <ol> <li> <div></div> </li> </ol> <p class="sycode"> 啥时没有IE6,啥时世界算太平啊。万恶的IE。 </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p>