CSS——颜色变化

根据设置的颜色位置就行显示

1. 颜色渐变1

<style type="text/css">
  div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:linear-gradient(red,blue);
    
    background:-moz-linear-gradient(left,#ace,#f96);
    background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
    background:-webkit-linear-gradient(left,#ace,#f96);
    background:-o-linear-gradient(left,#ace,#f96);
  }
  </style>

2. 颜色渐变2

 div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:-webkit-linear-gradient(top left,red,rgba(255,0,0,0));
  } 

3. 颜色渗透

div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
  } 

4. 光圈1

  div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:radial-gradient(red,yellow,blue);
  }

5. 光圈2

div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:radial-gradient(red 20%,yellow 30%,blue 40%);
  }

6. 根据方向改变颜色1

div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:-webkit-radial-gradient(bottom left,red,yellow,blue 80%);
  }

7. 根据方向改变颜色2

  div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:-webkit-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
  }