CSS渐变知识点

渐变知识点

一、渐变介绍

1.什么是渐变
渐变指的是多种颜色平缓变化的一种显示效果。
2.渐变的主要因素
色标：一种颜色 及其 出现的位置
一个渐变是由多个色变组成（至少两个）
二、渐变的分类

1. 线性渐变——以直线的方向来填充颜色

   属性：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 right

   color-point:色标，颜色及其位置
   取值：颜色 以及 位置的组合，之间用空格隔开。
   ex:
   red 0px,blue 100px,green 100

2. 径向渐变——以圆形的方式实现填充效果

   属性：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

3. 重复渐变

   将线性和径向渐变 重复几次实现的效果
   1.线性重复渐变
   background-image:repeating-linear-gradient(angle,color-point1,color-point2);
   2.径向重复渐变
   background-image:repeating-radial-gradient([size at position],color-point1,color-point2,…);
   注意：在重复渐变中不要使用百分比来表示颜色位置，要用绝对值。

4. 浏览器兼容性

   各浏览的新版本都支持渐变属性
   对于不支持的浏览器版本，可以通过加浏览器前缀的方式，让浏览器支持渐变。
   Chrome&safari:-webkit-
   Firefox:-moz-
   IE:-ms-
   opera:-o-
   ex:
   background-image:-webkit-linear-gradient(…);
   (www.caniuse.com查看浏览器各版本是否支持当前属性)