CSS3怎么实现重复线性渐变效果

　　本节主要再给大家介绍css3实现重复线性渐变效果的方法。

　　重复线性渐变效果，有的朋友可能听起来比较陌生，但是在我们日常生活中也是常见的一种渐变效果。

　　代码示例如下：

　　<!DOCTYPE>

　　<html>

　　<metacharset="utf-8">

　　<head>

　　<title>CSS3创建重复线性渐变效果</title>

　　<styletype="text/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;

　　}

　　.repeating-linear{

　　background:repeating-linear-gradient(-45deg,#4b6c9c,#5ac4ed5px,#fff5px,#fff10px);

　　}

　　</style>

　　</head>

　　<body>

　　<divclass="container">

　　<divclass="repeating-linear">重复线性渐变</div>

　　</div>

　　</body>

　　</html>

本文转载自中文网

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