渐变

来源：互联网发布：mac itunes 没有铃声编辑：程序博客网时间：2024/05/01 01:46

1.linear-gradient(angle, color-point1 ,color-point2......); 线性渐变

angle：指渐变的方向，可以是角度值，也可以是方向,to top(对应角度0deg),to right(90deg),to bottom(180deg),to left(270deg)

color-point:表示颜色的起始点，中间点或者结束点，取值为颜色和位置的结合，如red30%， yellow70%

具体如下：background-image:linear-gradient(90deg, yellow 30%,red 70%)/(to right,yellow 60px, red 120px)

注意：后面的颜色要大于前面颜色的值如上面的70%>30%,不然的话不会产生渐变。

2.radial-gradient(size at position, color-point1 ,color-point2...);径向渐变

size at position:指定渐变的圆心位置，默认为center，可以取值数值，百分比，关键字，可省略。

如：background-image:radial-gradient(200px at left bottom,green 40%,red 60%）；

球：

#d3{

            border-radius:100px;
            background-image:radial-gradient(200px at right top,white,#047)
         }

3.repeating-linear-gradient(angle，color-point1,color-point2...)；重复线性渐变

具体：background-image:repeating-linear-gradient(to top,red 0%,yellow 30%);注意，后面的值大于前面且相加小于100%

4.repeating-radial-gradient();重复径向渐变

5.有兼容问题，如ie8不能使用。

0 0