多种CSS3渐变应用方法总结附实例.pdfVIP

多种CSS3渐变应⽤⽅法总结附实例 如下图所⽰，在⽹页设计中，有时候会需要⽤到渐变效果，渐变可以创建出类似 彩 虹的视觉图案效果，在没有CSS3之前，为了显⽰⼀个渐变需要专门制作⼀个图⽚，这 种不法不但不灵活还增加请求数，⽽CSS3可以轻松实现⽹页渐变效果，⽤ 做渐变背 景、渐变导航、配合CSS3动画做特效等。在CSS3 中，Gradient （渐变）分为linear- gradient(线性渐变)和radial-gradient(径向渐变) 。CSS颜⾊线性渐变的语法在各种浏览器 ⾥的实现稍微有些不同，但最后是统⼀标准的： CSS颜⾊线性渐变的语法 background-image: linear-gradient(point || angle,]? stop, 第⼀个参数是渐变起始点或⾓。第⼆个参数是⼀种颜⾊停⽌点(color stops) 。⾄少需要 两种颜⾊(起点和终点) ，你可以添加任意种颜⾊来增加颜⾊渐变的丰富程度。对颜⾊ 停⽌点的定义可以是⼀种颜⾊，或⼀种颜⾊加⼀个百分⽐： /* color-stop(percentage/amount, color) */ color-stop(0 20, red) 因为CSS渐变⾊(Gradients)技术是CSS3⾥⽐较新的技术，属 ⾼级的CSS功能，