css3 渐变记

css3 渐变

  1. 线性渐变
  2. 径向渐变
  3. 重复线性渐变
  4. 重复径向渐变

线性渐变

　　线性渐变接受三个参数，渐变的方向，起始颜色，结束颜色。

　　标准语法及参数：linear-gradient:([[<angle> | to <side-or-corner>],]?<stop>,<stop>[,<stop>]*)

　　<angle>:通过角度来确定渐变的方向。0度表示渐变方向从下向上，90度表示从左向右。
　　关键词:通过使用关键词来确定渐变的方向。比如“to top”，从下到上，"to right"，从左到右，"to bottom"，从上到下，"to left"，从右到左。这些关键词对应的角度值为“0deg”，“90deg”，“180deg”，“270deg”。除了使用“to top”，“to right”之外，还可以使用“to top left”,从右下角到左上角，“to bottom right”,左上角到右下角。
　　stop:表示颜色与位置的起始点和结束点。可以插入多个stop。



css3 线性渐变





径向渐变

　　标准语法及参数：radial-gradient:([[<shape> || <size>][at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+)

　　 <position>：用来定义径向渐变的圆心位置。如果省略，默认值是center。其他关键词是“left”，“right”，“top”，“bottom”，“left top”，“right top”，“right bottom”，“left bottom”，还可以用长度值与百分比设置。
　　<shape>：用来定义径向渐变的形状。主要包括circle(圆形)，ellipse(椭圆)。
　　<size>：定义径向渐变形状大小。可用关键词，长度值与百分比。
　　<color-stop>：定义径向渐变线的颜色与位置。



css3 径向渐变





　　
　　

重复线性渐变

　　重复线性渐变repeating-linear-gradient与线性渐变linear-gradient他们的属性相同，但沿着线性方向无限重复。

<!doctype html>


css3 重复线性渐变





重复径向渐变

　　重复径向渐变repeating-radial-gradient语法与径向渐变类似，但以径向方向无限重复。

<!doctype html>


css3 重复径向渐变





posted @ 2015-07-08 13:14  微日月  阅读(272)  评论(0)    收藏  举报