CSS3学习手记（5） 渐变

 CSS渐变

  • 线性渐变  沿着一根轴线改变颜色，从起点到终点进行顺序渐变
  • 径向渐变 

 

线性渐变（默认从上到下）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{background: linear-gradient(red,green);width: 100px;height: 100px;}
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

 

从左到右

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background: linear-gradient(to left,red,green)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

 

对角

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background: linear-gradient(to left bottom,red,green)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

线性渐变使用角度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background: linear-gradient(45deg,red,green)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

颜色节点控制

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background: linear-gradient(45deg,red 30%,green 40%, yellow 20%)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

透明渐变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background: linear-gradient(90deg,rgba(255, 0, 0, 0),rgba(255, 0, 0, .3),rgba(255, 0, 0, 1))
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

 

重复渐变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background:repeating-linear-gradient(90deg,red 0%,blue 20%)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

径向渐变

从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background:radial-gradient(red,blue)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

颜色不均匀分布

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background:radial-gradient(red 50%,blue 70%)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

设置形状 默认椭圆（ellipse） circle(圆形)

重复径向渐变 略

径向渐变-尺寸大小关键字

  • closest-side    最近边
  • farthest-side   最远边
  • closest-corner  最近角
  • farthest-corner  最远角
posted @ 2017-06-26 17:01  星河mio  阅读(250)  评论(0)    收藏  举报