概述
1.渐变的含义与组成
含义：两种或多种颜色之间平滑过渡的效果
组成：由色标来组成
色标：
1、颜色
2、颜色出现的位置
2.渐变的属性和取值
1、属性
background-image
取值：
1、linear-gradient()
线性渐变
2、radial-gradient()
径向渐变
3、repeating-linear-gradient()
重复线性渐变
4、repeating-radial-gradient()
重复径向渐变
3.线性渐变
background-image:linear-gradient(angle,color-point,color-point,...);
1、angle
作用：指定 渐变的 方向或角度
取值：方向的关键词或角度值
1、to top --> 0deg
从下向上填充渐变
2、to right --> 90deg
从左向右填充渐变
3、to bottom --> 180deg
从上向下填充渐变
4、to left --> 270deg
从右向左填充渐变
5、角度
0deg ~ 360deg
2、color-point
作用：色标，标识一种颜色，以及出现的位置
ex:
开始的时候是红色 : red 0px/0%
50%的时候是蓝色 : blue 50%
结束的时候是绿色 : green 100%
ex:
div{
backgroung-image:linear-gradient(to top, red 0%,blue 50%,green,100%);
}
该div元素线性渐变，方向是to top，即从下向上填充渐变，0%的时候是红色，50%的时候是蓝色，100%的时候是绿色
4.径向渐变
background-image:radial-gradient([size at position],color-point,color-point,...);
1、size at position
size:圆的半径
position:圆心的位置
1、数值
0px 0px ：圆心在元素的左上角
15px 30px :
2、百分比
3、关键字
left/center/right
top/center/bottom
注意：该参数可以省略，如果省略的话，那么圆心默认就在元素的中间位置处
ex:
div{
backgroung-image:radial-gradient(5px at 0px 0px,
red 0%,blue 50%,green,100%);
}
该div元素径向渐变，圆的半径是5px，圆心在元素的左上角，0%的时候是红色，50%的时候是蓝色，100%的时候是绿色
5.重复渐变
重复线性渐变： background-image:repeating-linear-gradient(angle,color-point,color-point);
重复径向渐变：
background-image: repeaiting-radial-gradient([size at position],color-point,...);
其他用法和属性均与普通线性渐变和径向渐变相同
6.浏览器的兼容性
可以通过
增加 浏览器前缀 的方式 实现兼容性
Firefox : -moz-
Chrome & Safari :-webkit-
Opera : -o-
前缀加在哪???
如果浏览器不支持 属性的话，那么前缀就加在 属性名称之前
ex
animation : 动画属性
-moz-animation ：值;
如果浏览器支持属性但不支持值的话，那么前缀就加在 属性值前
ex
background-image:背景图像可以做渐变
background-image:linear-gradient();
background-image:-moz-linear-gradient();
background-image:-webkit-linear-gradient();
background-image:-o-linear-gradient();
7.效果图对比
线性渐变：
background-image: linear-gradient(to top,red 0%,blue 50%,green 100%);
径向渐变：
background-image:radial-gradient(100px at center center,red 0%,blue 50%,green 100%);
重复线性渐变：
background-image:repeating-linear-gradient(to top,red 0%,blue 50%,green 100%);
重复径向渐变:
background-image:repeating-radial-gradient(100px at center center,red 0%,blue 50%,green 100%);
最后
以上就是危机百合为你收集整理的CSS中的渐变效果的全部内容，希望文章能够帮你解决CSS中的渐变效果所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复