CSS背景颜色渐变

最新推荐文章于 2025-02-19 21:40:47 发布

jianqi6

最新推荐文章于 2025-02-19 21:40:47 发布

阅读量188

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/jianqi6/article/details/84382661

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种实现浏览器间CSS渐变效果兼容性的方法，通过为不同浏览器提供特定的CSS代码，确保了渐变效果的一致性展示。文中还提供了一个具体的示例代码，演示如何针对各种主流浏览器（包括旧版本）实现从橙色到绿色的渐变背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

兼容多浏览器就要为每一个浏览器写对应的 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>