首页 > HTML5与CSS3.0 > 线性渐变repeating-linear-gradient进阶

线性渐变repeating-linear-gradient进阶

作者: 分类:HTML5与CSS3.0 点击: 4,090 次

    很早以前写过一篇线性渐变的文章,如果还没有掌握CSS3中的线性渐变,建议先看一下。时隔一年半,再把它的姐妹篇——重复线性渐变搞定,才算是真正完结了吧。忍不住感叹,How time flies!

    这个属性也是属于background-image类型的,所以不支持background-color。

    一、语法结构

    repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
    \---------------------------------/ \----------------------------/
    Definition of the gradient line         List of color stops

    where <side-or-corner> = [left | right] || [top | bottom]
    and <color-stop>     = <color> [ <percentage> | <length> ]?

    仔细一看,貌似和linear-gradient没啥区别啊。

    1、angle

    渐变的角度,0deg到360deg,也可以是负数。默认值180deg。除了deg可以表示角度之外,turn、grad、rad,都可以表示角度。比如一个满圆360deg=1turn。

    2、side-or-corner

    用方位来表示角度,比如 to top表示0deg,to bottom 表示180deg,to right 表示90deg,to left 表示270deg。其实就是y轴的顺时针旋转。

    也可以 to left top 表示从右下到左上的对角线。to left bottom 表示从右上到左下的对角线。 默认是从上往下。

    3、color-stop

    由颜色和位置组成。

    颜色是必须值,位置可以是固定像素值,也可以是百分比值。多个颜色用逗号隔开。

    比如  #ff8 50%,rgba(255,255,255, .6) 120px,transparent 12%等。

    其实重复渐变有点像ps里面的填充图案,定义一个图案为基本单元,然后在一个区域里面进行平铺,达到重复的目的。

    二、案例

    1、两个颜色构成一个基本单元,第一个颜色从0开始,第二个颜色占据容器高度的10%的位置。所以容器高,渐变条就高,与容器高度保持一致的变化。

    三个颜色构成一个单元,加上角度。

    2、颜色可以固定具体的位置,当结束颜色和下一个起始颜色的位置是一样,但颜色值不一样的时候,可以产生很生硬的过渡,如果两个不同颜色之间的距离越大,渐变越柔和。颜色单元的高度固定的时候,不随着容器的大小发生高度的变化,只是平铺多少的变化了。

    3、加上角度和rgba透明度的变化

    4、可以直接用transparent表示透明。

    5、结合多重背景和透明度,可以实现很丰富的效果

    再来一个疯狂的提一下神,这个效果来自于CSS3 patterns gallery



文章作者:zhangxuan
本文地址:http://wanlimm.com/77201809036772.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

上一篇:
下一篇:

或许你会感兴趣的文章:

3条回应:“线性渐变repeating-linear-gradient进阶”

  1. avatar mxz1986说道:

    不错不错,例子写的很详细。

  2. avatar xiaomage1990说道:

    效果很炫,很值得一看和学习!赞一个!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.