下面我们就给人人引见一个罕见的css3渐变结果。
起首人人要知道，CSS3 定义了两种范例的渐变（gradients）：线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。
本节先重点引见线性渐变-Linear Gradients。
代码示例以下：
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title>CSS3建立线性渐变示例</title>
<style type="text/css">
.container{
text-align:center;
padding:20px 0;
width:960px;
margin: 0 auto;
}
.container div{
width:200px;
height:150px;
display:inline-block;
margin:2px;
color:#ec8007;
vertical-align: top;
line-height: 230px;
font-size: 20px;
}
.linear{
background:linear-gradient(to bottom, #4b6c9c , #5ac4ed);
}
</style>
</head>
<body>
<div class="container">
<div class="linear">Linear线性渐变</div>
</div>
</body>
</html>
结果以下图：
上图所示，就是由色彩#4b6c9c到#5ac4ed举行过渡的线性渐变。
或许设置色彩从#9492ff到#ccccff过渡，结果以下：
css3中的linear-gradient属性就是示意用线性渐变建立图象。
默许情况下，linear-gradient线性渐变是从上到下最先过渡的。
固然渐变的方向也能够是，向下/向上/向左/向右/对角方向，以及定义一个角度（angle）。
其语法是：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
第一个参数示意线性渐变的方向，第二个参数示意最先过渡的色彩即出发点色彩，第三个参数示意过渡到的色彩。
注：Internet Explorer 9 及之前的版本不支持渐变。
本篇文章就是关于css3完成线性渐变结果的要领引见，异常简朴易懂，愿望对须要的朋侪有所协助！
以上就是CSS3怎样完成线性渐变结果的细致内容，更多请关注ki4网别的相干文章！
