CSS中的渐变类型

渐变显示两种或更多种颜色的组合。

以下是渐变的类型:

渐变类型

  • 线性渐变(向下/向上/向左/向右/对角线)

  • 径向渐变

示例

让我们看一个径向渐变的例子:

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
            background: -o-radial-gradient(red 5%, green 15%, pink 60%);
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
            background: radial-gradient(red 5%, green 15%, pink 60%);
         }
      </style>
   </head>
   <body>
      <div id = "grad1"></div>
   </body>
</html>