HTML5渐变

     准备: Safari中的 color-stop 

语法:color-stop(stop,  color)

参数:stop,值为百分比或0-1之间的一个十进制数。表示color的位置位于整个渐变路径的相对位置。
color,表示在stop处出现的颜色。


圆角、渐变、阴影三大大杀器之一渐变的解决方案。css3.0有两种渐变,直线渐变linear-gradient和放射渐变radial-gradient。

 Linear Gradient 

语法:linear-gradient(渐变位置和角度,起始点,... 中间点...,结束点)

参数:
渐变位置的值可能是top、bottom、left、right,也可能是前而之一与后二之一的组合。
top,              渐变方向以上边界的中心为起点,止于下边界中心。 FF中的默认值。Safari好像不同。
bottom,        渐变方向以下边界的中心为起点,止于上边界中心。
left,              渐变方向以左边界的中心为起点,止于右边界中心。
right,            渐变方向以右边界的中心为起点,止于左边界中心。
top,              渐变方向以上边界的中心为起点,止于下边界中心。
top left,        渐变方向以左上顶点为起点,止于右下顶点。
top right,      渐变方向以右上顶点为起点,止于左下顶点。
bottom left,  渐变方向以左下顶点为起点,止于右上顶点。
bottom right,渐变方向以右下顶点为起点,止于左上顶点。

渐变角度的值形如45deg,表示最终的渐变方向是在位置参数决定的渐变方向上逆时针旋转45度。 默认为0

起始点中间点结束点,Safari中起点为from(color),结束点为to(color),中间点以color-stop(stop,color)的形式表示。Firefox中均以color+空格+stop百分比的形式表示。



    试一试   

将下面的代码添加到空白htm,FF中可以看到一个从左上往右下由红变黑的渐变背景。

 1  < style  type ="text/css" >
 2 
 3  .showbox  {
 4  width : 150px ;
 5  height : 200px ;
 6  margin : 100px ;
 7  border : 1px green solid ;
 8  background :   color: #000000;">;     
 9  background :  -moz-linear-gradient(left top , #f00,  #000) ;   /* 只有两个点时,stop分别默认为0和100% */
10  }
11 
12  </ style >
13 
14  < div  class ="showbox" > box 1 </ div >
 
如下:
HTML5渐变_第1张图片
稍作修改,增加一个中间渐变色蓝色。

background:"#0000ff">#f00,#00f 50%#000);

FF中结果如下:
HTML5渐变_第2张图片
红色的50%也可省略,FF中,如果省略这个stop值,浏览器会等分渐变路径,来依次填上关键点的颜色。

另外,FF中的stop值,可以是大于1的百分比,Safari中只能使用小于1的值。



 Radial Gradient 

语法:
radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*)

bg-postion: 同直线渐变大致相同。但默认是center。
angle: 决定测量color-stop中的distance的方向(怀疑是FF中的color-stop,Safari不详。)。
shape:circle/ellipse, 默认ellipse.
size: closet-side/closest-corner/farthest-side/farthest-corner/contain/cover,默认cover.
0
0
 
 

参考知识库

猜你在找
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
快速回复 TOP

你可能感兴趣的:(HTML5渐变)