CSS3怎么实现重复径向渐变效果

互联网 18-11-29

css3中的渐变效果，包括线性渐变、径向渐变、重复线性渐变以及重复径向渐变。这些渐变效果，可以使我们的网页内容更加丰富炫彩。

推荐学习：《CSS3教程》

那么在前面的文章中，我们已经给大家介绍了css3实现线性渐变效果、径向渐变效果以及重复线性渐变效果。

下面我就结合简单的示例继续给大家介绍css3实现重复径向渐变的方法。

代码示例如下：

<!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;         }          .repeating-radial{             background:repeating-radial-gradient(#4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px);         }      </style> </head> <body> <div class="container">        <div class="repeating-radial">重复径向渐变</div> </div> </body> </html>

重复径向渐变效果如下：