使用 CSS 创建渐变的最简单的跨浏览器兼容方式是什么？

发布于 2024-09-30 17:04:12 字数 138 浏览 8 评论 0原文

我注意到这个被一个服务使用了，效果看起来超级棒

-moz-linear-gradient(center top , #E3EBF3, #D5E1ED) repeat scroll 0 0 transparent

原文

I noticed this being used by a service, and the effect looks super great

-moz-linear-gradient(center top , #E3EBF3, #D5E1ED) repeat scroll 0 0 transparent

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

檐上三寸雪 2024-10-07 17:04:13

像您在问题中一样使用 CSS 属性。添加 -moz、-webkit 前缀，然后使用无前缀。

IE 的过滤器< /code> 属性可以做渐变。这是适当的，但它有效:)

回复收藏 0 原文

累赘 2024-10-07 17:04:13

http://www.colorzilla.com/gradient-editor/

使用modernizr和一些IE顶部的块将类添加到 html 标记，以便您可以提供有效的 HTML 和 CSS，以及必要的 hacks 和属性。

例如，在我过去使用过的渐变中：

body {
background: #2688cf;
}
.cssgradients body{
background: -moz-linear-gradient(top, #2688cf 0%, #2989d8 12%, #207cca 14%, #62a2d6 18%, #b9d5ea 28%, #ffffff 40%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2688cf), color-stop(12%,#2989d8), color-stop(14%,#207cca), color-stop(18%,#62a2d6), color-stop(28%,#b9d5ea), color-stop(40%,#ffffff));
background: -webkit-linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
background: -o-linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
background: linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
}

.ie6 body, .ie7 body, .ie8 body, .ie9 body {
background: -ms-linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2688cf', endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
}

http://www.colorzilla.com/gradient-editor/

use modernizr and some if IE blocks at the top to add classes to your html tag so that you can provide valid HTML and CSS, and hacks&properties to those necessary.

for instance, in a gradient I've used in the past:

body {
background: #2688cf;
}
.cssgradients body{
background: -moz-linear-gradient(top, #2688cf 0%, #2989d8 12%, #207cca 14%, #62a2d6 18%, #b9d5ea 28%, #ffffff 40%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2688cf), color-stop(12%,#2989d8), color-stop(14%,#207cca), color-stop(18%,#62a2d6), color-stop(28%,#b9d5ea), color-stop(40%,#ffffff));
background: -webkit-linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
background: -o-linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
background: linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
}

.ie6 body, .ie7 body, .ie8 body, .ie9 body {
background: -ms-linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2688cf', endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
}

回复收藏 0 原文

~没有更多了~