Hedgehog

正在学习前端,并寻求实习机会

 

以下是几种普及得比较好的触摸事件,可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备):
(on)touchstart:触摸开始的时候触发
(on)touchmove:手指在屏幕上滑动的时候触发
(on)touchend:触摸结束的时候触发
(on)touchcancel:系统取消touch事件的时候触发。例如电话接入或者弹出信息。一般用在游戏:玩着的时候,突然来电话了,就触发touchcancel事件暂停游戏、存档等操作。

而每个触摸事件都包括了三个触摸对象列表,每个列表里包含了对应的一系列触摸点(触摸对象,用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用):
identifier:一个数值,touch对象的unique ID ,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
client / clientY:触摸点相对于浏览器窗口viewport的位置,不包含滚动距离
pageX / pageY:触摸点相对于页面的位置,包含滚动距离
screenX /screenY:触摸点相对于屏幕的位置
radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用。
有了这些信息,就可以依据这些事件信息为用户提供不同的反馈了。

 Touch事件与Mouse事件的出发关系
在触屏操作后,手指提起的一刹那(即发生touchend后),系统会判断接收到事件的element的内容是否被改变,
如果内容被改变,会解析为touch事件,接下来的click事件都不会触发,
如果内容没有改变,则会解析为click事件,按照mousedown,mouseup,click的顺序触发事件。
特别需要提到的是,在解析为click事件时,只有再触发一个触屏事件时,才会触发上一个事件的mouseout事件。
因此有关于hover的小技巧,当点击过一个按钮之后,这个按钮就会一直处于hover的状态,此时基于这个伪类所设置的css也是起作用的,直到用手指点击另外一个地方,才会完成mouseout事件。

gesture事件(手势事件)
与touch事件相近,也用得很多的是gesture事件,这个事件将在下一篇讲到。

touch事件demo

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
<div id="canvas">
 <div id="move"></div>
 </div>
<style>
 *{margin:0;padding:0;}
 html,body{ width:100%;height:100%;}
 #canvas{position:relative;width:100%;height:100%;}
 #move{position:absolute;width:100px;height:100px;background:#0F0;}
 .spirit {position:absolute;width:50px;height:50px;background-color:red;}
 </style>
<script>
 var canvas = document.getElementById("canvas");
 var spirit, startX, startY;
 var a = 1;
 // touch start listener
 function touchStart(event) {
 event.preventDefault();
 if (spirit ||! event.touches.length) return;
 var touch = event.touches[0];
 startX = touch.pageX;
 startY = touch.pageY;
 spirit = document.createElement("div");
 spirit.className = "spirit";
 spirit.style.left = startX - 50 + "px";
 spirit.style.top = startY - 50 + "px";
 canvas.appendChild(spirit);
 spirit.innerHTML = a++;
 }
 // touch move listener
 function touchMove(event) {
 event.preventDefault();
 if (!spirit || !event.touches.length) return;
 var touch = event.touches[0];
 //spirit.style.left = touch.pageX - 50 + "px";
 //spirit.style.top = touch.pageY - 50 + "px";
 //或者用下面的
 var x = touch.pageX - startX;
 var y = touch.pageY - startY;
 spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
 }
 // touch end listener
 function touchEnd(event) {
 if (!spirit) return;
 canvas.removeChild(spirit);
 spirit = null;
 }
 // add touch start listener
 canvas.addEventListener("touchstart", touchStart, false);
 canvas.addEventListener("touchmove", touchMove, false);
 canvas.addEventListener("touchend", touchEnd, false);
 </script>

参考:http://www.jb51.net/html5/70096.html

http://blog.sina.com.cn/s/blog_51e565eb01018eff.html

http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html

 

前几天写几个页面,在几台手机上测试都没事,然后到了开发后期,发现在一台galaxy上的微信里面却发现变了样……

在列表那里,设置了li的height,也设了同样大小的line-height,一般情况下,文字应该是居中的

可是在galaxy里面,它文字偏偏却往上偏了……(这个现象出现在微信的webview里面)

研究了一番,发现galaxy的解析有点不一样,至于出现问题的原理,基于水平问题,还不能得出正确的答案。

只是能提供另一种方案,实现文字居中,就是不设height和line-height,设padding,上下的padding一样就好。

由于笔者的情况单一,如果有其他需求,该需再研究研究

 

现在在ios/android上的web网站变的越来越多,智能机中ios和android系统的设备市场份额也是与日俱增,相信未来会是一个趋势,那么如何构建基于webkit的网站呢?

这里有一篇文章介绍了如何用html5创建一个iphone的app,这是一个基于web的本地离线应用,相对于native应用来说基于web的应用开发和测试都非常快捷,基于webkit浏览器支持大部分的html5,也支持大部分的css3,而且开发语言也是大多数web工程师所熟悉的,最重要的一点是基于web的应用是完全跨平台的,不需要多平台的开发和测试。

开发基于webkit的web app/page时需要注意的有:

HTML特性:

<input type=”file” />在iphone上不work

<a href=”13888888888″>Call Me</a>可以调用打电话应用

google maps, iTunes和youtube的链接会在iphone上打开相应的组件

app/web page设置:

<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> 在设置书签的时候可以显示好看的图标

<meta name=”apple-mobile-web-app-capable” content=”yes” /> 离线应用的另一个技巧

<meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> 隐藏状态栏

<link rel=”apple-touch-startup-image” href=”startup.png” /> 设置开始页面图片

<meta name=”viewport” content=”width=device-width, user-scalable=no” /> 指定mobile,并且不可缩放

<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ /> 同上

CSS相关配置:

@media screen and (max-device-width: 480px){
/* 小屏幕的css样式 */
}

@media screen and (max-width: 320px){
/* 纵向的css样式 */
}

@media screen and (max-width:480px){
/* 横向的css样式 */
}

@media screen and (orientation: portrait){
/* iPad 纵向的css样式 */
}

@media screen and (orientation:landscape){
/* iPad 横向的css样式 */
}

display: -webkit-box; -webkit-box-orient:vertical/horizontal; -webkit-box-flex: value 水平垂直布局box

rounded corner/text shadow/box shadow/rgba/font-face/transform/transition/animation/border-image/gradients/ 充分利用这些css3的特性做出丰富的UI

脚本特性:

可以选用开源的javascript库,如yui, jquery, mootools, dojo …

垂直的js库,如canvas游戏库有LimeJs, GameJs等,Mobile UI库如jquery mobile, sencha touch, iui等,以及其它各种库

隐藏标题栏 – addEventListener(“load”, function() { setTimeout(function (){ window.scrollTo(0,1);}, 0); }, false);

webkitTransitionEnd/webkitAnimationStart/webkitAnimationIteration/webkitAnimationEnd transition/animation事件

localstorage/manifest 离线应用

模拟iphone的scroll效果,解决Mobile Safari下不支持position:fixed的问题:touch scrolldemo

调试:

safari上可以设置user agent为iphone上的safari(preference->advaced->developer tool),还可以手动添加android的user agent{ Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 –Nexus }

iphone的safari上有debug调试

关注Mobile性能问题,可以采用firebuglite等书签脚本来调试

文章的标题说的是web app/page,其实用html5和css3构建的app和page没啥区别,web page也很容易转换成native的app,通过phoneGap就可以了,phoneGap所做的就是在一个native的app内嵌入了一个类似chrome的浏览器,并且创建了一个桥接,从而直接去写web app就可以了,就像这个slide的标题写的一样“HTML5 is the Future of Mobile, PhoneGap Takes You There Today”,你的app可以在5个以上的平台上运行,使用的技术是你所熟悉的html/js/css,还等什么,赶快看看它的文档实践一下吧。

转自:http://adamlu.com/?p=527&cpage=1#comment-3672

 

因为都是些简单的逻辑代码,所以不作解说。

只是期间用到自定义获取元素的函数get(),和做了浏览器之间的兼容而已。

//为元素添加事件函数
//node --> 需要添加事件的元素
//type --> 事件类型的字符串		如:"click" 带引号,没有"on"
//handle --> 需要添加的函数
H.DOM.addEvent = function(node,type,handle){
	var node = H.DOM.get(node);
	if(node.addEventListener){
		node.addEventListener(type,handle,false);
	}
	else if(document.attachEvent){
		node.attachEvent("on" + type,handle);
	}
}
//为元素移除事件函数
//node --> 需要移除事件的元素
//type --> 事件类型的字符串		如:"click" 带引号,没有"on"
//handle --> 需要移除的函数
H.DOM.removeEvent = function(node,type,handle){
	var node = H.DOM.get(node);
	if(node.removeEventListener){
		node.removeEventListener(type,handle,false);
	}
	else if(document.detachEvent){
		node.detachEvent("on" + type,handle);
	}
}

 

 

 

CSS3引入新的字体尺寸单位 rem ,可以简单记忆为root rm。

CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。

em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),意思就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字体的百分比进行设置,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需,大家也可以参考下图:

我们来看一个简单的代码实例:

html {
font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size: 1.4rem;/*1.4 × 10px = 14px */
}
h1 {
font-size: 2.4rem;/*2.4 × 10px = 24px*/
}

我在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。

浏览器的兼容性

rem是CSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8不支持。
不过使用单位设置字体,可不能完全不考虑IE了,如果你想使用这个REM,但也想兼容IE下的效果,可你可考虑“px”和“rem”一起使用,用”px”来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。

转自:http://www.hujuntao.com/archives/css3-font-size-with-rem.html

 

在前面,我们自定义了一个getElementsByClassName()的函数,现在由该函数,我们可以引伸到一个根据类名和id获取元素的函数。

只需要做个判断就是了。因为仅供自己使用,且节省代码,所以并没有兼容所有css选择器,只是根据“.”和“#”这两个条件。

//获取元素
//str --> id , className or object		格式: "#id" , ".className" or 需要获取的对象
H.DOM.get = function(node){
	if(typeof node == "string"){
		var nodestr = node.toString().substr(1);
		if(node.match(/^#/)){
			node = document.getElementById(nodestr);
		}else{
			node = H.DOM.getElementsByClassName(nodestr);
		}
	}
	return node;
}
 
javascript 在事件监听方面的兼容性总结,注意是由于多个浏览器的不一致,导致大家在js书写时需要考虑多个浏览器的兼容性。
1、IE使用attachEvent/detachEvent方法来添加和删除事件监听器;
w3c使用addEventListener/removeEventListener方法。
例一:
//为元素添加事件函数
//node --> 需要添加事件的元素
//type --> 事件类型的字符串		如:"click" 带引号,没有"on"
//handle --> 需要添加的函数
H.DOM.addEvent = function(node,type,handle){
	var node = H.DOM.get(node);//获取元素
	if(node.addEventListener){
		node.addEventListener(type,handle,false);
	}
	else if(document.attachEvent){
		node.attachEvent("on" + type,handle);
	}
}

2、IE对其事件使用onevent的命名方式,而w3c的是event的命名方式。(见例一)

3、IE事件监听器内使用的是一个全局的Event对象,而w3c是将event对象作为参数传递给监听器。

例二:
//获取触发事件的元素
// e --> 作为参数,表示事件本身
H.Event.getEventTarget = function(e){
	e = window.event || e;
	return e.srcElement || e.target;
}

4、为了避免触发默认的事件行为,IE的做法是要求程序员设置Event对象中的returnValue属性值为false,而w3c的做法是执行preventDefault方法。

5、IE没有提供对事件捕获阶段的支持。

6、要停止事件的传递,IE的做法是设置event对象的cancelBubble为true,而w3c的做法是设置执行stopPropagation方法。

7、IE将事件监听器当做一个独立的函数来调用,而w3c中它是作为对象的方法来调用的,这表示在ie中事件监听器中的this关键字指向的不是事件发生对象而是一个没用的全局对象(window对象)。(见例二)

8、IE在使用事件监听器方面存在内存泄露问题。在IE浏览器中,如果要为某个元素创建一个事件监听器,并且在监听器中使用该元素,则在用户进入其他页面之前,该监听器以及相关的DOM节点作占据的内存空间不会被释放。

 

Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3)
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE (6)
Node.PROCESSING_INSTRUCTION_NODE (7)
Node.COMMENT_NODE (8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)

检测节点类型。

我们可以使用nodeType特性检验节点类型:

alert(document.nodeType);/**outputs “9″**/
alert(document.documentElement.nodeType);// outputs “1″

这个例子中,document.nodeType返回9,等于Node.DOCUMENT_NODE;同时document.documentElement.nodeType返回1,等于Node.ELEMENT_NODE;

也可以使用Node的常量来匹配这些值:

alert(document.nodeType==Node.DOCUMENT_NODE);//ture
alert(document.documentElement.nodeType==Node.ELEMENT_NODE);//true

这段代码可以在Mozilla 1.0+、Opera7.0+ 、Safari1.0+ 上正常运行。不幸的是,IE不支持这些常量,所以这些代码在IE上会产生错误。所幸,可以通过定义匹配节点类型的常量来纠正这种情况。

if(typeof Node==”undefined”){
window.Node={
ELEMENT_NODE:1,
ATTRIBUTE_NODE:2,
TEXT_NODE:3,
CDATA_SECTION_NODE:4,
ENTITY_REFERENCE_NODE:5,
ENTITY_NODE:6,
PROCESSING_INSTRUCTION_NODE:7,
COMMENT_NODE:8,
DOCUMENT_NODE:9,
DOCUMENT_TYPE_NODE:10,
DOCUMENT_FRAGMENT_NODE:11,
NOTATION_NODE:12
}
}

转自:http://blog.163.com/xz551@126/blog/static/821257972011112754345663/

 

找了那么多,似乎就这篇比较通俗易懂,就偷过来了

DOM树


首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子:
事件冒泡(又称事件传播)
当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。

代码如下:
$('a').bind('click',function(){alert('that tickles!')})
因此一个单击操作会触发alert函数的执行。
click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。
在操纵DOM的语境中,document是根节点。
现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。
.bind()

代码如下:
$('a').bind('click',function(){alert('That tickles!');})

这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。
.live()

代码如下:
$('a').live('click',function(){alert('That tickles!')})

JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a'作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a'这一CSS选择器是否匹配,如果都是的话,则执行函数。
live方法还可以被绑定到具体的元素(或“context”)而不是document上,像这样:

代码如下:
$('a',$('#container')[0]).live('click',function(){alert('That tickles!')})

.delegate()

代码如下:
$('#container').delegate('a','click',function(){alert('That tickles!')})

JQuery扫描文档查找$(‘#container’),并使用click事件和’a'这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CSS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论,即$(‘a’).live() == $(document).delegate(‘a’),是这样吗?嗯,不,不完全是。
为什么.delegate()要比.live()好用
基于几个原因,人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子:

代码如下:
$('a').live('click', function() { blah() });

$(document).delegate('a', 'click', function() { blah() });

后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。尽管live函数仅需要把’a'作为串参数传递以用做之后的判断,但是$()函数并未“知道”被链接的方法将会是.live()。
而另一方面,delegate方法仅需要查找并存储$(document)元素。
一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live,这样它就会立即执行。在这种方式下,其会在DOM获得填充之前运行,因此就不会查找元素或是创建jQuery对象了。

灵活性和链能力
live函数也挺令人费解的。想想看,它被链到$(‘a’)对象集上,但其实际上是在$(document)对象上发生作用。由于这个原因,它能够试图以一种吓死人的方式来把方法链到自身上。实际上,我想说的是,以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法,live方法会更具意义一些。
仅支持CSS选择器
最后一点,live方法有一个非常大的缺点,那就是它仅能针对直接的CSS选择器做操作,这使得它变得非常的不灵活。
欲了解更多关于CSS选择器的缺点,请参阅Exploring jQuery .live() and .die()一文。
更新:感谢Hacker News上的pedalpete和后面评论中的Ellsass提醒我加入接下来的这一节内容。
为什么选择.live()或.delegate()而不是.bind()
毕竟,bind看起来似乎更加的明确和直接,难道不是吗?嗯,有两个原因让我们更愿意选择delegate或live而不是bind:
1. 为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。
2. 如果你运行了$(‘a’).bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。
3. 或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。
停止传播
最后一个我想做的提醒与事件传播有关。通常情况下,我们可以通过使用这样的事件方法来终止处理函数的执行:

代码如下:
$('a').bind('click',function(e){
 e.preventDefault()
 e.stopPropagation()}
 )

不过,当我们使用live或是delegate方法的时候,处理函数实际上并没有在运行,需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止,我们的其他的来自.bind()的处理函数早已运行了。

 

网上搜了一些资料,大家也可以搜到,笔者只是整理了一下下而已。

对于webkit,radial(放射状)方式的背景渐变有两种,一种是旧的,一种是新的。

旧的那种语法跟Firefox差别比较大,而新的那种终于跟FF统一了。

先看一下旧的语法吧

/* 语法,参考自: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
/* 实际用法… */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);

  • 渐变的类型? (linear)
  • 渐变开始的X Y 轴坐标(0 0 – 或者left-top)
  • 渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
  • 开始的颜色? (from(red))
  • 中途改换颜色color-stop
  • 结束的颜色? (to(blue))

新写法采用了W3C和Firefox所用的语法,即,将-webkit-gradient拆分为-webkit-linear-gradient和-webkit-radial-gradient。

先看代码

.selector{

background:-moz-linear-gradient(left, white, black);/*gradient for firefox*/

background:-webkit-linear-gradient(left, white, black);/*new gradient for webkit */

background:-webkit-gradient(linear, 0 0, 0 100%, from(#white), to(#black));/*the old grandient for webkit*/

}

放射渐变也同样做了优化:

.selector{

background:-moz-radial-gradient(10% 30%, white, black);/*gradient for firefox*/

background:-webkit-radial-gradient(10% 30%, white, black);/*new gradient for webkit */

background:-webkit-gradient(radial, 0 10%, 0 30%, from(#white), to(#black));/*the old grandient for webkit*/

}

语法:

<radial-gradient>:radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);
<position>:[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
<shape>:circle | ellipse
<size>:closest-side | closest-corner | farthest-side | farthest-corner | contain | cover
<shape-size>:<length> | <percentage>
<color-stop>:<color> [ <length> | <percentage> ]?

取值:

<position>
<percentage>①:
用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>①:
用长度值指定径向渐变圆心的横坐标值。可以为负值。
left:
设置左边为径向渐变圆心的横坐标值。
center①:
设置中间为径向渐变圆心的横坐标值。
right:
设置右边为径向渐变圆心的横坐标值。
<percentage>②:
用百分比指定径向渐变圆心的纵坐标值。可以为负值。
<length>②:
用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top:
设置顶部为径向渐变圆心的纵坐标值。
center②:
设置中间为径向渐变圆心的纵坐标值。
bottom:
设置底部为径向渐变圆心的纵坐标值。
<color-stop>:
指定渐变的起止颜色。
<shape>
circle:
指定圆形的径向渐变
ellipse:
指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值
<size>
closest-side:
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner:
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side:
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner:
指定径向渐变的半径长度为从圆心到离圆心最远的角
contain:
包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover:
覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner
<shape-size>
写本文档时Firefox尚不支持<shape-size>
<percentage>:
用百分比指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<length>:
用长度值指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<color-stop>
<color>:
指定颜色。请参阅颜色值
<length>:
用长度值指定起止色位置。不允许负值
<percentage>:
用百分比指定起止色位置。

写法:

内核类型                                                               写法
Webkit(Chrome/Safari)                              -webkit-radial-gradient()/-webkit-gradient()
Gecko(Firefox)                                               -moz-radial-gradient()
Presto(Opera)                                                 -o-radial-gradient()
Trident(IE)                                                      -ms-radial-gradient()
W3C                                                                     radial-gradient()

实例:

.test{
background:-moz-radial-gradient(center center,circle,#f00,#ff0,#080);
background:-webkit-radial-gradient(center center,circle,#f00,#ff0,#080);
background:-o-radial-gradient(center center,circle,#f00,#ff0,#080);
background:-ms-radial-gradient(center center,circle,#f00,#ff0,#080);
background:radial-gradient(center center,circle,#f00,#ff0,#080);
}

图1

.test{background:-moz-radial-gradient(circle contain,#f00,#ff0,#080);
background:-webkit-radial-gradient(circle contain,#f00,#ff0,#080);
background:-o-radial-gradient(circle contain,#f00,#ff0,#080);
background:-ms-radial-gradient(circle contain,#f00,#ff0,#080);
background:radial-gradient(circle contain,#f00,#ff0,#080);
}

图2

.test{
background:-moz-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);
background:-webkit-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);
background:-o-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);
background:-ms-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);
background:radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);
}

图3

.test{
background:-moz-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);
background:-webkit-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);
background:-o-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);
background:-ms-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);
background:radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);
}

图4

IE并不支持CSS渐变,但是提供了渐变滤镜,可以实现最简单的渐变效果:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#ff0000′); /* IE6,IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#ff0000′)”; /* IE8 */

参考:

http://www.qianduan.net/understand-the-css3-gradient.html

http://www.qianduan.net/webkit-style-syntax-for-the-gradient-update-css3.html

http://hi.baidu.com/cmoooo/item/977e87569af11a3633e0a93d

© 2012 Hedgehog Suffusion theme by Sayontan Sinha