渐变知识点
一、渐变介绍
1.什么是渐变
渐变指的是多种颜色平缓变化的一种显示效果。
2.渐变的主要因素
色标:一种颜色 及其 出现的位置
一个渐变是由多个色变组成(至少两个)
二、渐变的分类
-
线性渐变——以直线的方向来填充颜色
属性:background-image
取值:linear-gradient(angle,color-point1,color-point2…)angle:表示渐变的填充方向或角度
取值:
(1) to top 从下向上的填充—— 0deg 等同于to top
(2) to bottom 从上到下的填充——180deg 等同于to bottom
(3) to left 从右向左填充—— 270deg 等同于to left
(4) to right 从左向右填充—— 90deg 等同于to rightcolor-point:色标,颜色及其位置
取值:颜色 以及 位置的组合,之间用空格隔开。
ex:
red 0px,blue 100px,green 100 -
径向渐变——以圆形的方式实现填充效果
属性:background-image
取值:radial-gradient([size at position],color-point1,color-point2,…)size at position
size:半径,以px为单位的数字
position:圆心所在位置
取值:
1.x y 具体数字
2.x% y% 元素宽和高的占比
3.关键词
x:left/center/right
y:top/center/bottom -
重复渐变
将线性和径向渐变 重复几次实现的效果
1.线性重复渐变
background-image:repeating-linear-gradient(angle,color-point1,color-point2);
2.径向重复渐变
background-image:repeating-radial-gradient([size at position],color-point1,color-point2,…);
注意:在重复渐变中不要使用百分比来表示颜色位置,要用绝对值。 -
浏览器兼容性
各浏览的新版本都支持渐变属性
对于不支持的浏览器版本,可以通过加浏览器前缀的方式,让浏览器支持渐变。
Chrome&safari:-webkit-
Firefox:-moz-
IE:-ms-
opera:-o-
ex:
background-image:-webkit-linear-gradient(…);
(www.caniuse.com查看浏览器各版本是否支持当前属性)