css实现渐变

最新推荐文章于 2025-05-30 21:57:33 发布

weixin_30763397

最新推荐文章于 2025-05-30 21:57:33 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/anningkang/p/10040192.html

本文详细介绍了如何使用CSS创建渐变背景，并确保在不同浏览器中的兼容性，包括IE、Firefox、Opera、Chrome和Safari。文章提供了具体的代码示例，展示了如何在各种浏览器中实现从一种颜色到另一种颜色的平滑过渡。

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

.gradient{
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#8ca0d3), to(#375a9a)); /** Chrome Safari **/
	background: -moz-linear-gradient(top, #8ca0d3, #375a9a); /** FireFox **/
	background: -o-linear-gradient(top, #8ca0d3, #375a9a);/** Opear **/ 
	background: -ms-linear-gradient(#8ca0d3 0%,#375a9a 100%);/** IE9 IE10 **/
 	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ca0d3',endColorstr='#375a9a',grandientType=0); /** IE8 **/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = #8ca0d3, endColorstr = #375a9a,grandientType=0);/** IE7 **/ 
}

参数解释：

IE系列
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平

Firefox
background: -moz-linear-gradient(top, #FF0000, #F9F900);
参数：top、bottom垂直，left、right水平例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变

Opera
background: -o-linear-gradient(top,#FF0000, #F9F900);
参数：top、bottom垂直，left、right水平例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变

webkit，如Chrome、Safari等
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
参数：linear线性， x1 x2, x3 x4 x1与x3相同时垂直，x2与x4相同时水平 from起始颜色 to结束颜色

转载于:https://www.cnblogs.com/anningkang/p/10040192.html