CSS3的颜色渐变的理解!颜色渐变的角度问题,颜色渐变百分比的理解!以及加入了透明度的问题。

1、CSS3的颜色渐变角度的问题

颜色渐变角度的使用并没有兼容性的考虑,当然了也不用写兼容性代码,同时对于方向性也能有更多的定义

就如上图所示的那样,如:

0deg:表示从下往上进行颜色渐变

90deg:表示从左向右进行颜色渐变

45deg:表示从左下到右上进行颜色渐变

2、CSS3的颜色渐变百分比的问题

自己之前学习这方面的知识的时候,就会有很多的疑惑,理解的不够透彻。后来自己写代码进行了测验,现在基本上理解了一些,写出来与大家分享。如果写的有不对的,希望大家不吝赐教。

先来一句代码:

background: linear-gradient(90deg,blue 0%,green 60%,red 80%,orange 100%);

1、首先我们要明白,上述的百分比,指的是这个颜色在所在界面颜色位置最纯的地方,于是就会产生两个特殊的位置

     第一个位置:如果该颜色的位置大于0 ,那么该位置之前将全部是纯色。所以,如果没有对百分比进行设          

     定,那么默认为 0%;如 blue 20%,那么从0到百分之20,将全部是纯蓝色。

    最后一个位置:如果该位置的百分比小于100%,那么该位置之后将全部是纯色。同样是如果没有进行设置,默认为 

    100%。  如 orange 90%,那么从90%到100%之间将全部为orange色

2、我们要明白两个颜色之间的百分比差就是两种颜色之间的渐变过程。所以这也就要明白,后面的百分比一定要比前面的 大。如果写的小了,就会造成如图的情况:

  background: linear-gradient(90deg,blue 0%,green 40%,red 39%,orange 100%);

3、加入透明度,以及透明度的百分比的理解

其实,加入了透明度这个对整个的理解没有很大的邮箱,方向以及变化都和上述一样。仅仅是百分比的理解,有些不一样。

如:background:linear-gradient(90deg,rgba(255,0,0,0.1),rgba(255,0,0,1) 90%);

指的是,在百分之50这个位置,我们的渐变已经完成了百分之90,当然了改成小数也是可以的。

猜你喜欢

转载自blog.csdn.net/qq_43238599/article/details/86707373