HTML5技术

linear-gradient 的“高能”用法 - 冇乜吔

字号+ 作者:H5之家 来源:博客园 2016-03-17 13:00 我要评论( )

首先,让我们来了解一下linear-gradient的基本用法: 说明: 用线性渐变创建图像 语法: linear-gradient = linear-gradient([ [ angle | to side-or-corner ] ,]? color-stop[, color-stop]+) side-or-corner = [left | right] || [top | bottom] color-sto

首先,让我们来了解一下“linear-gradient”的基本用法:

说明:用线性渐变创建图像

语法:

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值:

下述值用来表示渐变的方向,可以使用角度或者关键字来设置:

<angle>:用角度值指定渐变的方向(或角度)。

to left:设置渐变为从右到左。相当于: 270deg

to right:设置渐变从左到右。相当于: 90deg

to top:设置渐变从下到上。相当于: 0deg

to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。

<color-stop>:用于指定渐变的起止颜色:

<color>:指定颜色。

<length>:用长度值指定起止色位置。不允许负值

<percentage>:用百分比指定起止色位置。

其他知识点:

不知你是否注意到“第一个”语法后面的“+”号没,这些符号(“?”、“+”、“*”)其实用法跟正则表达式很像,如果正则表达式不知道的请看下面正解:

  ,:代表每个属性之间的分隔符号。

  ?:代表“属性”可以出现零次或一次,也就是可有可无

  +:代表“属性”可以出现一次或多次,但是必须出现一次

  *:代表“属性”可以出现零次或多次。

  |:代表可以从多个“属性”中任选一个。

  ||:代表“属性”可以是左边的一个或是右边的一个,或是两个都行

  []:代表里面是“属性”或“属性”集合

  <>:这个不是正则表达式里面的,但是它代表定义的取值范围,如上语法的“<angle>”,取值的里面就会附带说明这个“<angle>”是干嘛的

  {1,4}:代表“属性”最少出现一次,最多出现四次。“1”和“4”都是动态的值,不是固定的,根据描述而定

 

来看看基本用法实例:

  

  (图1)

  linear-gradient(#fff, #333);

  linear-gradient(to bottom, #fff, #333);

  linear-gradient(to top, #333, #fff);

  linear-gradient(180deg, #fff, #333);

  linear-gradient(to bottom, #fff 0%, #333 100%);

  以上这五句样式都可以实现(图1)的渐变效果

 

再来看看复杂点的普通实例:

                  

View Code

效果图:

 

再让我们看看“高能”的用法:

View Code

效果图:

 

怎么样,效果是不是很酷炫?再瞧瞧其他的:

还有更多好看的就不展示了,源自国外大牛:

 

其中的几个重要知识点总结:

■Ⅰ.“background”的绘制顺序是从后面的开始向前面的绘制的,百说不如一栗:

1 background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;background-size: 25px 25px;

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • alt和title的区别与用法 - 骑车帅小子

    alt和title的区别与用法 - 骑车帅小子

    2017-04-28 08:03

  • SASS入门教程及用法指南 - 定乾坤

    SASS入门教程及用法指南 - 定乾坤

    2016-09-23 12:00

  • 关于H5 storage 的一些注意事项以及用法 - 求学sql

    关于H5 storage 的一些注意事项以及用法 - 求学sql

    2016-02-25 10:00

  • 再谈Newtonsoft.Json高级用法 - 焰尾迭

    再谈Newtonsoft.Json高级用法 - 焰尾迭

    2016-01-25 12:21

网友点评
a