这篇文章将为大家详细讲解有关CSS怎么实现线性渐变效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的洱源网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

代码示例如下：

.container{

text-align:center;

padding:20px0;

width:960px;

margin:0auto;

}

.containerdiv{

width:200px;

height:150px;

display:inline-block;

margin:2px;

color:#ec8007;

vertical-align:top;

line-height:230px;

font-size:20px;

}

.linear{

background:linear-gradient(tobottom,#4b6c9c,#5ac4ed);

}

Linear线性渐变