CSS3 - 设置渐变颜色背景，线性/放射性/循环

渐变就是多种颜色混合而成的效果，css3要实现渐变，就必须使用渐变函数来设置background或则background-imge属性。同时为了兼容各个浏览器（IE，safari，chrome，Firefox），还需要添加对应的带开发商前缀的渐变

1，线性渐变

a,使用linear-gradient（）函数可以创建渐变

<style>#div1 {width：200px；height： 200px；background: linear-gradient(top, white, blue);background: -ms-linear-gradient(top, white, blue);background: -webkit-linear-gradient(top, white, blue);background: -moz-linear-gradient(top, white, blue);}#div2 {width：200px；height： 200px；background: linear-gradient(top left, white, blue);/*渐变从左上角到右下角*/background: -ms-linear-gradient(top left, white, blue);background: -webkit-linear-gradient(top left, white, blue);background: -moz-linear-gradient(top left, white, blue);}
</style><div id="div1"></div>
<div id="div2"></div>

b,设置多个颜色渐变

#div1 {width: 200px;height: 200px;background: linear-gradient(left, red, yellow, lime, aqua, blue);background: -ms-linear-gradient(left, red, yellow, lime, aqua, blue);background: -webkit-linear-gradient(left, red, yellow, lime, aqua, blue);background: -moz-linear-gradient(left, red, yellow, lime, aqua, blue);}

c,使用渐变点（gradient stop）控制每个颜色的起点
每个渐变点用百分比值表示，0%是整个渐变的起点，100%是整个渐变的终点。下面样例把橙色和黄色的范围扩展到了中间：

#div1 {background: linear-gradient(left, red 0%, orange 10%, yellow 90%, violet 100%);background: -ms-linear-gradient(left, red 0%, orange 10%, yellow 90%, violet 100%);background: -webkit-linear-gradient(left, red 0%, orange 10%, yellow 90%, violet 100%);background: -moz-linear-gradient(left, red 0%, orange 10%, yellow 90%, violet 100%);}

2，放射性渐变

（1）使用radial-gradient()函数创建放射性渐变

第一个参数 circle 表示圆形渐变。下面这个放射性渐变其圆心是白色，然后逐渐过渡到圆周的淡蓝色：

#div1 {background: radial-gradient(circle, white, lightblue);background: -ms-radial-gradient(circle, white, lightblue);background: -webkit-linear-gradient(circle, white, lightblue);background: -moz-linear-gradient(circle, white, lightblue);}

如果使用 ellipse 表示把渐变拉伸成椭圆形：

#div1 {background: radial-gradient(ellipse, white, lightblue);background: -ms-radial-gradient(ellipse, white, lightblue);background: -webkit-radial-gradient(ellipse, white, lightblue);background: -moz-radial-gradient(ellipse, white, lightblue);
}

（2）设置渐变的中心位置

下面使用 at 关键字告诉浏览器开始的位置离左边缘70%，离上边缘30%

#div1 {background: radial-gradient(circle at 70% 30%, white, lightblue);background: -ms-radial-gradient(circle at 70% 30%, white, lightblue);background: -webkit-radial-gradient(circle at 70% 30%, white, lightblue);background: -moz-radial-gradient(circle at 70% 30%, white, lightblue);}

同线性渐变一样我们可以设置多个渐变颜色,也可以控制渐变颜色的起点

3，循环渐变

linear-gradient() 和 radial-gradient() 只能将设置的颜色渐变一次。
而 repeating-linear-gradient() 和 repeating-radial-gradient() 会以相同的颜色顺序进行不断地循环，直到颜色条纹填满元素。
循环渐变函数语法基本上与普通渐变一样。唯一不同的是，我们需要确保限制了渐变的大小（即最后一个颜色包含一个百分比或像素值），以便其可以循环。

（1）使用百分比限制渐变大小

下面样例中心颜色是白色，设置渐变淡蓝色在10%的位置就结束。然后渐变循环，又以白色开始。

#div1 {background: repeating-radial-gradient(circle, white, lightblue 10%);background: -ms-repeating-radial-gradient(circle, white, lightblue 10%);background: -webkit-repeating-radial-gradient(circle, white, lightblue 10%);background: -moz-repeating-radial-gradient(circle, white, lightblue 10%);
}

（2）使用固定像素值限制渐变大小
下面样例不管容器大小如何变化，每个条纹都有固定一样的宽度（30px）

#div1 {background: repeating-linear-gradient(left, white, lightblue 30px);background: -ms-repeating-linear-gradient(left, white, lightblue 30px);background: -webkit-repeating-linear-gradient(left, white, lightblue 30px);background: -moz-repeating-linear-gradient(left, white, lightblue 30px);
}

4，对不支持的浏览器设置后备方案
上面的样例，渐变都是通过 background 属性实现的。实际上，对 background-image 属性使用同样的渐变函数也可以达到相同的目的。

它们的区别是，使用 background 属性可以使用纯色作为后备：

#div1 {background: lightblue;background: radial-gradient(circle, white, lightblue);background: -ms-radial-gradient(circle, white, lightblue);background: -webkit-linear-gradient(circle, white, lightblue);background: -moz-linear-gradient(circle, white, lightblue);
}

使用 background-image 属性，可以创建背景图片作为后备。

（当然对于支持渐变的浏览器也是很聪明的，它不会下载后备图片。）

#div1 {background-image: url(bg.jpg);background-image: radial-gradient(circle, white, lightblue);background-image: -ms-radial-gradient(circle, white, lightblue);background-image: -webkit-linear-gradient(circle, white, lightblue);background-image: -moz-linear-gradient(circle, white, lightblue);}

5,在线渐变生成工具

访问地址：Ultimate CSS Gradient Generator

我们只需在网页中选择颜色，调节控制器直到渐变达到满意的效果即可。然后工具会生成所需要的代码（包括不同开发商前缀的所有代码）

我们可以获得我们想要的渐变色

CSS3 - 设置渐变颜色背景，线性/放射性/循环相关推荐

html边框颜色线性渐变,css3设置边框颜色渐变的方法有哪些
css3设置边框颜色渐变的方法有哪些发布时间:2020-09-14 14:51:54 来源:亿速云阅读:110 作者:小新 css3设置边框颜色渐变的方法有哪些?这个问题可能是我们日常学习或工作经 ...
html背景线性渐变,CSS3背景颜色渐变 - 线性/放射性/循环
渐变就是多种颜色混合而成的效果,css3要实现渐变,就必须使用渐变函数来设置background或则background-imge属性.同时为了兼容各个浏览器(IE,safari,chrome,Fir ...
html中怎么设置渐变颜色设置,css中渐变色怎么设置
这篇文章主要介绍了css3编写浏览器背景渐变背景色的方法,现在分享给大家,也给大家做个参考. css中渐变色怎么设置 css 给网页中的背景设置渐变色,css的渐变颜色可以指定固定的两个颜色之间的线性 ...
iconfont 图标用css设置渐变颜色
//用背景图片的方式设置渐变方向跟颜色 background-image: -webkit-linear-gradient(left bottom, #0AA77A, #5CFE9D); //设置绘制 ...
【SeeMusic】音符方块颜色设置 ( 单一颜色设置 | 多彩音符设置 | 定时变色设置 | 渐变颜色 | 分轨道提示 )
SeeMusic 系列文章目录 [SeeMusic]下载安装并注册 SeeMusic 软件 [SeeMusic]购买付费版本 ( 进入购买页面 | 购买流程 ) [SeeMusic]创建 SeeMus ...
echarts图表给柱形图的每个柱子设置不同颜色（包括每个柱子设置渐变颜色）
配置效果配置每个柱子不同颜色的代码 itemStyle: {normal: {// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,分别表示右,下,左,上.例如(0, ...
Android Studio主题设置、颜色背景配置
2019独角兽企业重金招聘Python工程师标准>>> color-themes 效果展示打开http://color-themes.com/有很多样式可供选择 1. Mon ...
多背景图CSS,CSS3设置多张背景图片
个人作业--week1 1.问题 (1)与软件学院相比,计算机科学更偏向理论研究,本系开设软件工程课程的意图是否是为了平衡理论与应用的比重? (2)Bug的定义根据开发者与使用者的分析角度不同,有着很 ...
CSS渐变颜色和浏览器前缀、opacity透明度以及设置多个背景图片写法
目录前言一.多个背景图片二.渐变颜色 1.线性渐变 2.径向渐变 3.浏览器前缀 4.opacity透明度写在最后前言在前面说了CSS怎样设置背景图片,与设置颜色的几种方式.如果你想查看可 ...

CSS3 - 设置渐变颜色背景，线性/放射性/循环

同线性渐变一样我们可以设置多个渐变颜色,也可以控制渐变颜色的起点

CSS3 - 设置渐变颜色背景，线性/放射性/循环相关推荐

最新文章

热门文章