兼容多浏览器就要为每一个浏览器写对应的 CSS，太低版本的浏览器只能使用图片做背景，下面是当前五大浏览器对 gradient 的支持
经常有一些时候需要使用渐变背景，使用长条图片有点太不高大上了，于是自己写了个小例子，兼容多浏览器就要为每一个浏览器写对应的 CSS，太低版本的浏览器只能使用图片做背景。
下面是当前五大浏览器对 gradient 的支持
代码如下:
<style type="text/css" media="screen">
#gradient {
width: 200px;
height: 200px;
/* 如果浏览器不支持渐变，使用图像作为背景 */
background: url(gradient.jpg);
/* Webkit: Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6600), to(#339900));
/* Webkit: Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #ff6600, #339900);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ff6600, #339900);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ff6600, #339900);
/* IE 10 */
background: -ms-linear-gradient(top, #ff6600, #339900);
/* IE < 10 */
/* 注意：这一行必须写在最后 */
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);}
</style>代码如下:
<p id="gradient"></p>
啥时没有IE6，啥时世界算太平啊。万恶的IE。
【相关推荐】
1. 特别推荐：“php程序员工具箱”V0.1版本下载
2. 免费css在线视频教程
以上就是兼容多浏览器的gradient写法详解的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
405
收藏
