前端基础入门学习线路之CSS渐变色效果的实现方法

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);

}

注意，我们首先设定了一个背景色。这个颜色是在万一用户使用的浏览器不支持CSS渐变色(Gradients)技术时使用的颜色。CSS渐变色(Gradients)技术里还支持带有角度的渐变方向，而不仅仅只有直上直下或直左直右。我们可以用下面的语法实现它：

#example2 {

/* fallback */

background-color:#063053;

/* chrome 2+, safari 4+; multiple color stops */

background-image:-webkit-gradient(linear, left bottom, right 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(45deg, #063053, #395873, #5c7c99);

/* firefox; multiple color stops */

background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);

/* ie10 */

background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);

/* opera 11.1 */

background-image: -o-linear-gradient(45deg, #063053, #395873);

/* The “standard” */

background-image: linear-gradient(45deg, #063053, #395873);

}

我们可以做的更复杂些….一个色彩缤纷的CSS颜色渐变?下面我们来做一个彩虹：

/* example 3 - linear rainbow */

#example3 {

/* fallback */

background-color:#063053;

/* chrome 2+, safari 4+; multiple color stops */

background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));

/* chrome 10+, safari 5.1+ */

background-image:-webkit-linear-gradient(red, green, blue, purple, orange);

/* firefox; multiple color stops */

background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);

/* ie10 */

background-image: -ms-linear-gradient(red, green, blue, purple, orange);

/* opera 11.1 */

background-image: -o-linear-gradient(red, green, blue, purple, orange);

/* The “standard” */

background-image: linear-gradient(red, green, blue, purple, orange);

}

关于IE对CSS颜色渐变技术的支持做一些说明：在早期IE是使用filter和-ms-filter语法实现渐变色，而最新版的IE里改为了-ms-linear-gradient语法。我们可以使用CSS里条件判断语句来解决这个问题：

3. .gradientElement {

4. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#063053’, endColorstr=‘#395873’);

5. -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#063053’, endColorstr=‘#395873’)”;

6. }

7.  

8. <![endif]–>

不是很理想，但这对设计一个网站很重要。

CSS环形颜色渐变(Radial Gradients)

CSS环形颜色渐变(Radial Gradients)跟线性渐变(linear gradients)不一样，它不是沿着一个方向渐变，而是以一个点为中心，向四周辐射渐变，360度的。目前除了IE外的所有浏览器都支持CSS环形颜色渐变(Radial Gradients)，但它们也都有各自不同的语法……我说的就是你，WebKit引擎的浏览器，WebKit曾经彻底修改了它的CSS环形颜色渐变(Radial Gradients)的语法。下面我们来看看老式的写法：

/* basic */

background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red));

/* color stops */

background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));

而现在WebKit(主要代表是谷歌浏览器)里的新语法跟火狐浏览器的完全一致了：

radial-gradient( [ || ,]? [ || ,]? , [, ]*)

这种环形颜色渐变语法是最新的火狐和谷歌浏览器使用语法。还有一些常量可以使用在这种渐变技术中来设定渐变环形的大小：

closest-side: 对于原型，是指渐变图形扩散时需要到达的最近的一个边。对于椭圆，是指横向或纵向中要达到最近的一个边。

closest-corner: 是指渐变图形扩散时需要到达的最近的一个角

farthest-side: 跟 closest-side 相似，但到达到的是最远的一个边。

farthest-corner: 是指渐变图形扩散时需要到达的最远的一个角

contain: closest-side的同义词.

cover: farthest-corner的同义词

环形颜色渐变(Radial Gradients)的一个基本的用法是这样的：

#example4 {

background-image: -moz-radial-gradient(orange, red);

background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */

background-image: -webkit-radial-gradient(orange, red); /* new syntax */

background-image: radial-gradient(orange, red);

}

上面的例子没有设定位置和大小——只有两个颜色停止点。实际是可以使用无数颜色，就像下面我们制作的彩虹：

#example5 {

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
1715882096551)]

[外链图片转存中…(img-hlo9qAuD-1715882096551)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！