引荐进修:《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>
反复径向渐变结果以下:
如上图所示,从中间最先色彩从#4b6c9c过渡到#5ac4ed,再从白色过渡到白色。于是就构成上图中蓝白条距离的反复渐变结果。
上图是从#9492ff过渡到色彩#ccccff的反复径向渐变。
这里须要注重的就是,函数repeating-radial-gradient() 的运用。
repeating-radial-gradient()函数建立一个从原点辐射的反复渐变构成的<image> 。
repeating-radial-gradient()的语法与radial-gradient()雷同。
本篇文章就是关于CSS3完成反复径向渐变结果的要领引见,异常的简朴,愿望对须要的朋侪有所协助!
以上就是CSS3怎样完成反复径向渐变结果的细致内容,更多请关注ki4网别的相干文章!