浏览器渐变色

最新推荐文章于 2021-08-03 18:18:59 发布

转载最新推荐文章于 2021-08-03 18:18:59 发布 · 587 阅读

WEB前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用CSS实现渐变背景的方法，并列举了不同浏览器下兼容性的写法。包括了从旧版浏览器如IE6到现代浏览器如Chrome 10及以上的多种渐变背景实现方式。

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

#example1{
	/* 底色 */
	background-color: #063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
	/* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	/* ie8 + */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
	/* ie10 */
	background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
	/* 标准写法 */
	background-image: linear-gradient(#063053, #395873, #5c7c99);
}

试了一下，好像只要有最后一个标准写法就可以

        /* 标准写法 */
	background-image: linear-gradient(#063053, #395873, #5c7c99);

详细信息移步
http://www.webhek.com/css-gradients/