CSS渐变属性（gradient）的用法

93 阅读 0 评论 62 点赞

我是靠谱客的博主自然枫叶，这篇文章主要介绍CSS渐变属性（gradient）的用法，现在分享给大家，希望可以做个参考。

渐变分为线性渐变和径向渐变，所谓渐变就是几种颜色之间的平稳过渡。

线性渐变
线性渐变（linear-gradient）
实现线性渐变，你至少需要定义两种颜色的结点，这两种结点就是你想平稳过渡的颜色，即：其中一种颜色结点为起点，另一种颜色结点为结束点。

书写：

background: linear-gradient(color1,color2);

color1为起点结点，color2为结束点结点。

同时也可以定义渐变的方向，是从上到下渐变，还是从左至右渐变，或者从右至左渐变，默认情况下是从上至下渐变的。

书写：

background: linear-gradient(direction,colro1,color2);

direction表示渐变的方向，此值直接写方向的起点即可，如：渐变方向为从左至右，直接写left即可，渐变方向为从下至上，直接写bottom即可。

当然也可以对角渐变，如：从左上角到右下角，书写为background: linear-gradient(left top,color1,color2);

默认渐变方向是从上至下渐变：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
   <title>渐变(gradients)属性</title>
   <style>

   div {
   width: 400px;
       height: 200px;
       background: -webkit-linear-gradient(red,blue);
       background: -o-linear-gradient(red,blue);
       background: -moz-linear-gradient(red,blue);
       background: -mos-linear-gradient(red,blue);
       background: linear-gradient(red,blue);
   }

   </style>
</head>
<body>

<div></div>

</body>
</html>