css3的颜色线性渐变属性：几种颜色之间的平稳过渡（附完整代码）

使用css3实现线性渐变的简介

css3中定义了两种渐变类型：线性渐变和径向渐变。线性渐变是指两个或者两个以上颜色之间显示平稳的过渡的动画效果，我们一般在css3中使用新增的gradients属性实现这个效果，我们根据渐变的方向分为从上至下、从右至左和对角渐变，其中默认的方向是从上向下渐变。

使用css3实现线性渐变的原理

我们需要在css3中定义两个颜色的节点，而这两个颜色就是需要平稳过渡的颜色，其中一个颜色节点为起点，另外一个颜色节点就是结束点，我们以div背景为例讲述一下background:linear-gradient(direction,colro1,color2);语法的使用。

使用css3实现线性渐变的代码

类型一：渐变方向是从上至下渐变

<!DOCTYPEhtml>

<html>

<head>

<metacharset="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>

</body>

</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c57194.shtml