色标

前面的话 　　上篇介绍了 线性渐变 ，本文接着介绍径向渐变的内容 定义 　　径向渐变，实际上就是椭圆渐变，圆只是一种特殊的椭圆而已。径向渐变从圆心点以椭圆形状向外扩散，渐变的 实现 由两部分组成：椭圆和色标。椭圆部分用来控制径向渐变的位置、大小和形状等。而色标部分包含一个颜色值和一个位置，用来控制渐变的颜色变化 　　[注意]safari4-5、IOS3.2-4.3、android2.1-3只支持线性渐变，且需要添加-webkit-；safari5.1-6、IOS5.1-6.1、android4-4.3支持线性和径向渐变，且需要添加-webkit-；IE10+及其他高版本浏览器支持标准写法 //标准写法 radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+) //-webkit-老版本径向渐变的写法 -webkit-radial-gradient([<position>||<angle>,]? [<shape>||<size>,]>?<color-stop>[,<color-stop>]+) 椭圆 　　径向渐变方式主要由<position>、<shape>、<size>这三个参数影响，分别控制椭圆的圆心、形状和大小 position 　　 定义渐变的圆心，默认是center

前面的话 　　上篇介绍了 线性渐变 ，本文接着介绍径向渐变的内容 定义 　　径向渐变，实际上就是椭圆渐变，圆只是一种特殊的椭圆而已。径向渐变从圆心点以椭圆形状向外扩散，渐变的 实现 由两部分组成：椭圆和色标。椭圆部分用来控制径向渐变的位置、大小和形状等。而色标部分包含一个颜色值和一个位置，用来控制渐变的颜色变化 　　[注意]safari4-5、IOS3.2-4.3、android2.1-3只支持线性渐变，且需要添加-webkit-；safari5.1-6、IOS5.1-6.1、android4-4.3支持线性和径向渐变，且需要添加-webkit-；IE10+及其他高版本浏览器支持标准写法 //标准写法 radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+) //-webkit-老版本径向渐变的写法 -webkit-radial-gradient([<position>||<angle>,]? [<shape>||<size>,]>?<color-stop>[,<color-stop>]+) 椭圆 　　径向渐变方式主要由<position>、<shape>、<size>这三个参数影响，分别控制椭圆的圆心、形状和大小 position 　　 定义渐变的圆心，默认是center

渐变就是从一种颜色过渡到另一种颜色的填充过程，两种颜色相交时会进行混合，渐变的类型有两种： 1、线性渐变（linear）：通过 linear-gradient 函数定义 2、径向渐变（radial）：通过 radial-gradient 函数定义 语法： 线性渐变： background：linear-gradient （方向，颜色，…) 重复线性渐变 ：repeating-linear-gradient （方向，颜色，…) 渐变方向（或角度）： to left ：设置渐变为从右到左 相当于：270deg to right ：设置渐变从左到右 相当于：90deg to top ：设置渐变从下到上 相当于：0deg to bottom ：设置渐变从上到下 相当于：180deg（默认值） to left top ：设置渐变为从右下到左上 to right top ：设置渐变为从左下到右上 to bottom left ：设置渐变为从右上到左下 to bottom right ：设置渐变为从左上到右下 我们来看看linear-gradient的具体用法： 这里是一个线性渐变从中间（水平方向）和顶部（垂直方向）开始，起始于蓝色，过渡到白色. ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191119110157470.jpg 代码片段如下： <

以前，我们要实现这种渐变，可能要用 Photoshop 或 Fireworks 创建一个渐变图形，然后使用 background-image 属性把渐变图形放在元素的背景中。 现在，CSS支持渐变背景，可以理解为Web浏览器即时创建的图像。所以，渐变也使用常规的 background-image 属性创建 线性渐变 background-image: linear-gradient( 角度 , 颜色); 线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色。 微信订阅号：Rabbit_svip 这条直线的方向由角度指定，或者在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字，例如 to bottom left。 如上图例子 CSS代码： body { background-image: linear-gradient(to right , #7A88FF, #7AFFAF); } 如果渐变是从元素上边的紫色过度到下边的绿色，要使用 to bottom 关键字。 CSS代码： html, body { width: 100%; height: 100%; } body { background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF); } 另外