html5css3认识background-clip用来判断是

background-clipbackground-originCSS3backgroundmodulebackground-clipbackgroundborderbackground-background-positionbackground-clip:[border|padding][,[border|padding]]*background-origin:[border|padding|content][,[border|padding|background-值，则background包括border区域。如果background-image background-clip值之间用逗号分隔。background-paddingpositionpadding（"00"padding值则相对于内容边缘。与background-clip相同，多个值也用逗号分隔。如果background-clip是padding值，background-origin是border值，并且CSS3backgroundmodulebackground-clip默认类似于background-clip:border。background-originbackground-origin:padding。sucksIE6IE7（button）的背景相当于：background-clip:border;hasLayout（button）的背景则相当于：background-clip:padding;CSS3Mozilla,Safari3Konqueror：IExxxoPresto的Opera私有的、-icab-是iCab私有的，-khtml-是以KHTML为引擎的浏览器（如KonquerorSafari、-mozMozillaGecko（Firefox，Mozilla、-webkitWebkit（KHTML）的浏览器（如Safari、Swift。 ""><htmlxmlns="<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"border:3pxdouble#95071b;/*3px*/}<h1>background-clipbackground-origin</<p>Designedby：<ahref=""title="PlanABC-怿飞'sBlog">怿HTMLHTMLCSS（详细见注释buttonpadding:020px;border:3pxdouble#95071b;/*用3px边来模拟设计图中的白线*/}background-originbackground-originCSS 注：本文写于2006年1IE7、IE8Firefox3还未，文中所有说的浏览器支持均在年的月和月，我先后了几篇关于CSS2.1中选择符的介绍文章。大体看来那几篇文章中介绍过的大部分选择符都已经可以在像Mozilla/Firefox，Safari和Opera等现代浏览器中使用了。我们现在要做的就是等待InternetExplorer尽快赶上来，那我们就可以尽情地使用CSS2.1中的选择符了。好在InternetExplorer在其第7个版本中已经在尽力追赶CSS3新增选择符是如何使用还是本文中对选择符描述主要是参考了《年月日W3C 是 E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素URLE匹配所有用户界面（form）中处于可用状态的E元素E表单E~ 器假设HTML文档中包含下面的代码结构：<divid="nav-<divid="content-<divid="content-<divid="tertiary-<divid="nav-idnavdivdiv[id^="nav"]{background:#ff0;}div[id$="primary"]{background:#ff0;}这时选择符将匹配div#nav-primarydiv#content-primary。div[id*="content"]{background:#ff0;}和 版本的Mozilla、Firefox、Flock、Camino、Safari、url（一个#后面紧跟名称或者元素的id）指向的是文档中的特定元素。何的片断识别标识，:target伪类将不会匹配任何元素。会在他增加一个边框：div#content-primary:target{outline:1pxsolid#300; UI元素状态伪类input[type="text"]:enabled{background:#ffc;}input[type="text"]:disabled{background:#ddd;}:CHECKED伪类:checked伪类允许开发者为处于选中状态的checkbox和radio设定样式。当然这也要在浏览器允许改变表单控件外观的条件下。下面的CSS规则将会使选中的radio和checkbox元素显input:checked{border:1pxsolid#090; :ROOT伪类的两条规则其实是一样的（大体上说来:root要比html更专业点。:root{background:#ff0;}html{background:#ff0;:NTH-CHILD()伪类p:nth-child(3){color:#f00;元素的序号为1，因为下面的规则将会匹配第1、3、5...了子元素p：p:nth-child(odd){color:#f00;p:nth-child(even){color:#f00;：p:nth-child(3n+0){color:#f00;}p:nth-child(3n){color:#f00;}tr:nth-child(2n+11){background:#ff0;（2*2+11＝15浏览器支持这个选择符甚至没有浏览器支持nth类的选择符。如果有的话请帮我指正:nth-of-p，dudo：p:nth-of-type(3){background:#ff0;当你想确定是否已经指向了第三个p元素，这种方 就会不一样，除非p所有的所有兄弟元素也都是p元素。:nth-last-of-type伪类p:nth-last-of-type(2){background:#ff0;:last-child伪类p:last-child{background:#ff0; :first-of-type伪类p:first-of-type{background:#ff0;:last-of-type伪类p:last-of-type{background:#ff0;:only-child伪类p:only-child{backgound:#ff0;了:first-child（上面的规则会被匹配到文档中所有第一个子元素p中。:only-of-type伪类p:only-of-type{background:#ff0;:empty伪类p:empty{background:#ff0所有元素。例如，下面的CSS将会指向所有不是p的元素：:not(p){border:1pxsolid#ccc;::selection伪类::select{color:#f00;况，因此Safari还需要一点改进。基于Mozilla的浏览器要使用 后。这条CSS规则将会匹配所有p元 后ul元素：p~ul{background:#ff0;部分Explorer8、Oper9.27）中的支持程度（dudo）IEIE YYYYYYYYYYYYYYYNNYYYNNNNNE:nth-NNN NNNNNE:nth-of-type()NNNNNNY NNN E:only-NNY E:only-of-NNN NNYYNNNYYNNNYYYNNNNNYNYYYNNNY YE~YYY和所在区域的宽度、高度，以及background-origin的位置决定文字效果：(Texteffects)textoverflowellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。HSLcolors:除了支持RGB眼色外，还支持HSL（色相、饱和度、亮度。以前一般都是作图的时候HSL谱，但这样一来会包括的颜色。H度表示，S和L百分比表示，比如hsl(0,100%,50%)HSLAcolors:加了个不 用户界面(User-interface)[att^=valval的att[att$=valval的att其它模块：(Othermodules)mediaqueries:感觉叫 EricMeyer7CSS3EricMeyerCSS3CSSWeb2.05行开始3的倍数行来还不另外，WebCool曾CSSAnEricMeyer7CSS3EricMeyerCSS3CSSWeb2.05行开始3的倍数行来还不另外，WebCoolCSSCSS3CSSCSS3[EricMeyer]CSS3CSS2CSS3CSS35年前，CSS从另一方面讲，你可以争辩说那个停顿期是有益的，让浏览器厂商有时间去修复BUG样接受。我觉得一些导致开发的迟缓，这只是我的感觉，这也是我为什么离开CSS工作组的原因。我现在只是偶尔被邀请从事一些别的W3C工作。CSSDOMJavaScriptCSSCSS而实现以前只能靠JavaScript实现的条纹式表格。JavaScriptCSSWeb不过，也有另外的一些趋势，一些JS中的东西也被CSS工作组参考。JSCSSJSCSS这方面的文章。我们已经看到人们使用JS让浏览器，或者对一些过去的可性问题进行变通，通过JS实现HTML5和CSS3效果的日子也很快会到来。[Eric CSS3.1,CSS3.2,CSS1CSS2[EricMeyer]:是，那是个好主意。但我并不指望这个能实现因为这不现实。你只能用成成[EricMeyer]，CSS3的的《ThevisualdesignofWeb2.0》中提到“Roundedeverythingdon’tblametheroundedcornersW3C2002CSS3草案border-radiusHTML ><属性：border-radius。它是上面四个属性值的简写。值：<length>{1,4}[/<length>{1,4}]?如果斜线前后的值都存在，那么斜线前的值设置水平半径，且斜线后的值设top-left、top-rightbottom-rightbottom-left序来设置的。如bottom-left省略，那么top-rightbottom-right省略，那么它等于top-left。如果top-right省略，那么它等于top-left。 border-radius也会导致该元素的背景也是圆的，即使bordernone。如果background-clippadding-box，则背景（background）会被曲线的内边裁剪。如果border-boxborderpadding 如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两 right,bottom,left}，Ltop=Lbottom=所在矩形区域的宽，Lleft=Lright=Firefoxborder-radiusFirefoxborder-radius-moz-border-radius:<length>{1,4}|-moz-border-radius-bottomleft:<length>|-moz-border-radius-bottomright:<length>|-moz-border-radius-topleft:<length>|-moz-border-radius-topright:<length>|具体每个 -webkit-border-radius:<length>{1,2}|-webkit-border-bottom-left-radius:<length>{1,2}|-webkit-border-bottom-right-radius:<length>{1,2}|-webkit-border-top-left-radius:<length>{1,2}|-webkit-border-top-right-radius:<length>{1,2}|每个属性有1个或2个值，当有两个值时1个表示水平半径，一个表示垂直半径writing-mode改变也随之而变。所以，Safari和Chrome中的圆角可以是椭webkitW3CCSS3草案2005年版本非常一致，和当前的草webkit版本较低造成的。得到以khtml为 径为0，即圆角失效，而不会像Firefox那样同比率缩小。UEDblog和今天你带伞了吗?。基础代码如下：border-width:UEDblog和今天你带伞了吗?。基础代码如下：border-width:-moz-border-radius:-khtml-border-radius:border-radius:11px;两者结合实现的组件Cornerz。CSSCSS3HTML5Web5CSS3Web。目前这些技术1.-webkit-border-radius:20px;border-radius:20px;所支持的浏览器：Firefox,Safari border:5pxsolid#cccccc;-webkit-border-image:url(/images/border-image.png)5-moz-border-image:url(/images/border-image.png)5repeat;border-image:url(/images/border-image.png)5repeat;这里，border:5px设定了边界的宽度，然后，每个边界的 Firefox3.1,Safari 在使用这个功能了，如24Wayswebsite.-webkit-box-shadow:10px10px25px-moz-box-shadow:10px10px25pxbox-shadow:10px10px25pxXY10px，第3个属性定义阴影的虚化程text-shadow:2px2px5px支持的浏览器：Firefox3.1SafariChromeBox，Opera文字阴影).前3个数字表示红绿蓝三色的值，最后一个值代表，另外，我们还可以使用opacity实现(目前的灯箱效果多使用该技巧-译者)RGBA 实现(但在IE浏览器支持得并不好CSS3，可以直接实现透明效果。rgba(200,54,54,0.5);background:rgba(200,54,54,color:rgba(200,54,54,color:opacity:支持的浏览器：Firefox,Safari,Chrome,Opera(opacity)以及IE7(opacitywith@Font-Face自己指定字体，不过因为牵扯到问题，实际能用的字体也是有限的(另外，体积庞大的中文字体也是一个不好解决的问题-译者)。@font-facesrc:url('/images/Anivers.otf')}Firefox3.1,Safari,Opera10andIE7怕麻烦，可以在IE实现这个功能，请参考：makefont-faceworkinIE)Safari。不幸的是，SafariFirefoxFirefox3.1CSS3FirefoxCSS3ChromeWebkitSafariSafariMacChromeWindows根据统计数据，2008年11月止，44.2%Firefox,3.1%Chrome,2.7%SafariCSS3InternetWeb圈子，这个比例可能更高，大约有73.6%(Blog.SpoonGraphics提供的数据) InternetExplorer:46%InternetCSS验证问题:这些CSS3功能并非最终版本，目前不同的浏览器使用不同 功能，可能为你的StyleSheet带来验证上的问题。不当的使用:对这些效果的不当使用，可能带来一些不良

.3（Structuralpseudo-性和ID属性的定义，使得文档更加简洁。ChromeMACOSXSafari3.1:rootborder:1pxsolidblue;在(X)HTML文档中，其效果等同于：html{border:1pxsolidblue;}E:nth-tr:nth-child(3){„„} /*匹配所有表格里面排第3的行<tr>*/tr:nth-child(2n+1){„„}/*2n+1，公式，匹配所有奇数行*/tr:nth-child(odd){„„}/*odd：关键字，匹配所有奇数行*/tr:nth-child(2n){„„} /*2n：匹配所有偶数行*/tr:nth-child(even)}/*even：li xhtml如下：<ol#sample1li:nth-child(even){/*sample1的子元素li*/background:#FF9;/*也可以设定float、margin、border等属性*/}#sample1li:nth-{}#sample2li:nth-{}#sample2li:nth-{}#sample2li:nth-{}<ol#sample3li:nth-{}#sample3li:nth-{}#sample3li:nth-{} <ol#sample4td:nth-{}#sample4td:nth-{}#sample4td:nth-{}<tableborder="0"cellspacing="0"cellpadding="0"在上面的例子中，子元素的类型都是单一的（li或者td），而下面这个例子中，子元素的类型不再单一（dtdd）：<dl<dt>dt1，总<dd>dd1，总<dt>dt2，<dd>dd2，<dd>dd3，<dt>dt3，<dt>dt4，<dd>dd4，#sample5dt{font-}#sample5dt:nth-} "<htmlxmlns="" " <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"body{font:small/2serif;}h1,h2,h3font-size:}{;}#sample1li:nth-{}#sample1li:nth-{}#sample2li:nth-{}#sample2li:nth-{}#sample2li:nth-{}#sample3li:nth-{}#sample3li:nth-{}#sample3li:nth-{}{}#sample4td:nth-{}#sample4td:nth-{}#sample4td:nth-{}#sample5dtfont-}#sample5dt:nth-}<h1>css3<ol<ol<ol<tableborder="0"cellspacing="0"cellpadding="0"<dl<dt>dt1,总<dd>dd1,总<dt>dt2,总<dd>dd2,总<dd>dd3,总<dt>dt3,总<dt>dt4,总<dd>dd4,总 CSSCSS3HTML5Web，提供部分支持。本文介绍了5CSS3Web，不过，这些技术户向你的场合。圆角效果-moz-border-radius:border-radius:20px;-moz-border-radius-topleft:-moz-border-radius-topright:-moz-border-radius-bottomright:-webkit-border-top-left-radius:所支持的浏览器：Firefox,Safari用例 W3CWorkingBorder-radiusonCSS3.infoTheArtofWeb图形化边界 border:5pxsolid-webkit-border-image:url(/images/border-image.png)5-moz-border-image:url(/images/border-image.png)5repeat;border-image:url(/images/border-image.png)5repeat; Firefox3.1,Safari用例:W3CWorkingBorder-imageonCSS3.infoBorder-imageinFirefox块阴影与文字阴影站在使用这个功能了，如24Wayswebsite.-webkit-box-shadow:10px10px25px-moz-box-shadow:10px10px25px#ccc;box-shadow:10px10px25px#ccc;XY10px，第3个属性定义阴影的虚化程度，text-shadow:2px2px5px支持的浏览器：Firefox3.1,Safari,Chrome(只支持Box阴影)，Opera(只支持文字 opacity实现 （目前的灯箱效果多使用该技巧-译者）24W3CWorkingBox-shadowonCSS3.infoW3CWorkingDraftText-shadowon使用RGBA透明效目前，Web设计中的透明效果主要靠PNG 实现（但在IE浏览器支持得并不好-译者在CSS3，可以直接实现透明效果。rgba(200,54,54,background:rgba(200,54,54,color:rgba(200,54,54,color:opacity:FirefoxSafari,Chrome,Operaopacity)IE7(opacity,with24WaysW3CWorkingDraftRGBAonCSS3.infoPureCSSOpacity使用@Font-Face字己指定字体，不过因为牵扯到问题，实际能用的字体也是有限的(另外，体积庞大的中文字体也是一个不好解决的问题-译者)。@font-facesrc:url('/images/Anivers.otf')}Firefox3.1,Safari,Opera10andIE7烦，可以在IE实现这个功能，请参考：makefont-faceworkinIE)Fontsavailableforfont-faceembeddingFont-faceinIE,makingWebfontsworkWebfonts,thenextbigthing-AListFirefoxFirefox3.1CSS3MacChromeWindows根据统计数据，2008年11月止，44.2Firefox,3.1%Chrome,2.7%SafariCSS3InternetWeb子，这个比例可能更高，大约有73.6%（Blog.SpoonGraphics提供的数据）因上面讲述的这些CSS3功能会给你的 InternetExplorer46InternetCSS StyleSheet 下面这个截图是border属性的几种基本变化，通过对这几种基本变化的延伸 border-left:20pxtransparentdotted;border-top:20pxgreensolid;border-right:20pxtransparentdotted;border-bottom:20pxorangesolid;overflow 一些需要折叠的面板中经常见，这个也是用Border模仿出来的。 中才能看了。我暂时将它取名为幸运转轮吧！ IE6、IE7、FF3、Opera9.63 ""><htmlxmlns="<metahttp-equiv="Content-Type"content="text/html;charset=utf-8" 属性的终极研究---看我七十二变(冰极 <style#wrapper{width:500px;margin:0auto;border-left:4px#888solid;border-right:4px#888solid;background:#fff;padding-bottom:50px;}#cornerem,#cornerb,#cornerstrong,#corneri,#cornerspan{display:block;border- fff;font-weight:bold;text-decoration:none;}#cornera#b1{left:34px;top:3px;}#cornera#b2{left:18px;top:18px;}#cornera#b3{left:3px;top:33px;}:0px :-h1 .bloga:link,.blog ridge;border-right:10pxyellowridge;border-bottom:10pxorangeridge;} .t1{border-left:20px#fffsolid;border-top:20pxgreensolid;border-right:20px#fffsolid;border-bottom:0;}.t2{border-top:20px#fffsolid;border-right:20pxredsolid;border-bottom:20px#fffsolid;border-left:0;overflow:hidden;}.t3{border-top:20px#fffsolid;border-left:20px#000solid;border-bottom:20px#fffsolid;border-right:0;}.t4{border-left:20px#fffsolid;border-bottom:20pxbluesolid;border-right:20px#fffsolid;border-top:0;}.tb_base{margin:0.tb_base.s1{display:block;border-left:20pxredsolid;border-top:20pxgreensolid;border-right:20pxyellowsolid;border-bottom:20pxorangesolid;width:0px;height:0px;overflow:hidden;margin:0auto;}.tb_base.s2{display:block;border-left:10pxredsolid;border-top:10pxgreensolid;border-right:10pxyellowsolid;border-bottom:10pxorangesolid;width:20px;height:20px;overflow:hidden;margin:0auto;}.tb_base.s3{display:block;border-left:20pxtransparentdotted;border-top:20pxgreensolid;border-right:20pxtransparentdotted;border-bottom:20pxorangesolid;width:0px;height:0px;overflow:hidden;margin:0auto;}greensolid;border-bottom:20pxtransparentdotted;border-right:20pxorangesolid;width:0px;height:0px;overflow:hidden;margin:0auto;}.tb_base.s4{display:block;border-left:40pxtransparentdotted;border-top:40pxgreensolid;width:0px;height:0px;overflow:hidden;}.tb_base.s5{display:block;border-right:40pxtransparentdotted;border-top:40pxredsolid;width:0px;height:0px;overflow:hidden;} dotted;border-bottom:40px#000solid;width:0px;height:0px;overflow:hidden;}.tb_base.s7{display:block;border-bottom:40pxbluesolid;border-right:40pxtransparentdotted;width:0px;height:0px;overflow:hidden;} #1liab{position:absolute;top:20px;left:40px;border-left:5px#fffsolid;border-top:5pxgreensolid;border-right:5px#fffsolid;border-#1li#1lia:hoverb{border-top:5pxorange#otherliab{top:10px; 2 2#m1a{border-bottom:20pxgreengroove;left:39px;} 2#m2a{border-bottom:20pxredgroove;left:119px;} 2#m3a{border-bottom:20pxblue 2#m4a{border-bottom:20pxorange 2liaspan{display:block;position:absolute;top:5px;left:8px;} 2lia:hover{color:#00FFFF;}/**/ 2#m1a:hover{border-bottom:20px#CC9933groove;} 2#m2a:hover{border-bottom:20pxgraygroove;} 2#m3a:hover{border-bottom:20px#FF00FFgroove;} 2#m4a:hover{border-bottom:20px#99CC66 3li{width:90px;height::20px;line-height:20px;float:left; 3liaspan{display:block;position:absolute;top:2px;left:0px;color:#fff;} 3lia:hover{border-bottom-color:orange;} 3lia:hover 3lia:hoverem{border-left:20pxorangesolid;} 3#m5{left:54px;} 3 3 3orangesolid;} #sliderbara{display:block;border-left:5pxtransparentdotted;border-right:5px #sliderbara:hover{border-bottom:5px#00Fsolid;}#sliderbara:hoverb{background:#00F;cursor:pointer;} te;border-left:5pxtransparentdotted;border-right:5pxtransparentdotted;}.title.upa{border-bottom:5px#666.title.upa:hover{border-bottom:5pxblue.title.downa{border-top:5px#666.title.downa:hover{border-top:5pxblue 4box{width:182px;height:160px;margin:20pxauto;background:#fff;/* 4 dotted;border-right:20px#FF00CCsolid;border-bottom:10pxtransparentdotted;} 4liaem{display:block;width:0;height:24px;border-top:10pxtransparent 4lia{text- 4lia:hover{border-right- 4lia:hoverem{border-left-color:#CC3300;cursor:pointer;} 4lia:hoverb{color:#000000;cursor:pointer;} 5/*键.outa{display:block;width:0;height:26px;border-top:10pxtransparentdotted;border-right:20px#CC66CCsolid;border-bottom:10pxtransparentdotted;}.outaem{display:block;width:0;height:26px;border-top:10pxtransparentdotted;border-left:20px#CC66CCsolid;border-bottom:10pxtransparent .outa{text-.outa:hoverem{border-left-.outa:a{display:block;width:0;height:24px;border-top:10pxtransparentdotted;border-right:20px#fffsolid;border-bottom:10pxtransparentdotted;}.intaem{display:block;width:0;height:24px;border-top:10pxtransparentdotted;border-left:20px#fffsolid;border-bottom:10pxtransparent #f4a{text-decoration:none;border-top:10pxtransparentdotted;border-right:20px#FF0000solid;border-bottom:10pxtransparentdotted;}#f4aem{display:block;border-top:10pxtransparentdotted;border-left:20px #f4a:hoverem{border-left-color:#CC3300;cursor:pointer;}#f4a:hoverb{font-size:14px;color:#fff;cursor:pointer;} #6 #6lia{display:block;border-left:25pxtransparentdotted;border-bottom:40pxredsolid;border-right:25pxtransparentdotted;width:0;height:0;margin:0auto;#6liab{display:block;border-left:25pxtransparentdotted;border-top:40px dotted;width:0;height:0;position:absolute;top:15px;left:0px;z-index:1;#6liaem{display:block;width:20px;height:22px;position:absolute;z-index:2; 6lia:hover{border-bottom-color:#000099;} 6lia:hoverb{border-top-color:#000099;} 6lia:hoverem{color:orange;}<div<div<a <a <a <divclass="tab"style="margin-<divclass="base"style="margin-<table<divclass="base"style="margin-<table<span<span<span<span<table<b<b<b<b<div<div<ul <li><ahref=" /binyong"target="_blank">b target="_blank">产品新闻 target="_blank">热点跟踪<liid="other"><a <div<div<ul <liid="m1"><ahref=" /binyong"target="_blank"><span>今日<liid="m2"><a <liid="m3"><a <liid="m4"><a <div<div<ul <liid="m5"><ahref=" /binyong"target="_blank"><span>今日<liid="m6"><a <liid="m7"><a <liid="m8"><a <div<spanclass="up"><aid="arrow"href="#none"title="我是border<spanclass="down"><aid="arrow"href="#none"title=border<div<spanclass="sliderbg"<a<divclass="tab_content"<spanclass="up"><aid="arrow"href="#none"title="我是border<spanclass="down"><aid="arrow"href="#none"title=border<divclass="photobox"id="<ul <spanclass="up"><aid="arrow"href="#none"title="我是border<spanclass="down"><aid="arrow"href="#none"title=border<div 5box"<span<ul <spanclass="up"><aid="arrow"href="#none"title="我是border<spanclass="down"><aid="arrow"href="#none"title=border<div 6box"<ul <li><a <li><a <li><a <li><a <li><a <li><a 节省时间的特性。尽管只有当前了浏览器版本才能支持这些效果，但了解它们还是必须别圆角、不、阴影和调整元素大小。1：基本标记 我们的xHTML需要一下div元素:#indie,应用个别的几个圆角. #resize,展示如何使用某种CSS来实现重设大小的效果.<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN” <html <metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″<title>AnIntroductiontoCSS3;ANettuts<linkhref=”style.css”rel=”stylesheet”type=”text/css”<div<divid=”round”><divid=”indie”><divid=”opacity”><divid=”shadow”><div<imgsrc=”image.jpg”alt=”resizableimage”width=”200″ background-color:}#wrapper{width:100%;height:}divwidth:300px;height:300px;margin:10px;float:left;} 2:圆角#roundborder:1pxsolid}#roundborder:1pxsolid-moz-border-radius:-webkit-border-radius:}3:个别的圆角#indieborder:1pxsolid-moz-border-radius-topright:-moz-border-radius-bottomright:-webkit-border-top-left-radius:-webkit-border-bottom-left-radius:} 4:以CSS3的方式修改不 “opacity:#opacitybackground-color:opacity:}5:阴影效实现阴影也有很多方法，最常用的就是使用Photoshop制作成阴影 -webkit-box-shadow:3px5px10px下面我来解释一下这四个值都代表什么，第一个3pxdiv元间的水平(横向)距离，第二个5px指的是阴影与div之间的垂直(纵向)距离，第三个10px指的是阴影的#shadowborder:1pxsolid-webkit-box-shadow:3px5px10px}6:调整大在版本的CSS（Safari）看到本信息说明该文是通过网页教学（）整理发布的，请不要删掉！属性，比如”max-width”,“max-height”,“min-width”和“min-height”.#resizeborder:1pxsolid#000;resize:both;overflow:auto;}在这里主要说一下resize和overflow属性，resize:both;的意思就是所有边都可以调整尺寸，它的值还有horizontal和vertical，顾名思义，就是横向和纵向。而overflow是为了配合resize工作的，在这里使用auto.总怎么样，你在这篇文章中有没有什么收获呢？虽然在仅有很少数的浏览器支持CSS3不可否认的是CSS3的确会为我们的作节省 的间。如果对渐进强有所解和认， 受CSS3再 在IE6上了那只是的开程。们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child。较好地支持只有Opera9+和Safari3+。伪类:nth-child()的参数是an+b，如果按照上的描述，写成中文，很可能会让人头第一种：简单数字序号写:nth-第第二种：倍数写法:nth-匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3nli:nth-child(3n){background:orange;}/*把第3、第6、第9、„、所有3LI第三种：倍数分组匹配:nth-child(an+b)与:nth-child(an-为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。第四种：反向倍数分组匹配:nth-child(-个较为实用点，用来限定前面N个匹配常会用到*/第五种：奇偶匹配:nth-child(odd)与:nth- 随着网络的发展，CSSWeb随着网络的发展，CSSWebCSSborder-radius对于一些浏览器，它们有其私有的圆角属性。如FFmoz-border-radius，SafariChromewebkit-border-radiusFFSafariChromeSafariChromeFirefox3.5HTML5CSS31 31 3<audio查 file.ogg"<123查 关 safari和Opera浏览器支持CSS3的文字阴影。 性。这可以解决字符串过长时的bug，相信很多网页设计师都遇到过。 audioHTML 的最棒，chrome2.0beta的最棒，chrome2.0beta的支持也在不断改进。而firefox趣的话可以到firefox开发 去查看。不过前端观察会继续跟进firefox新版本的进展-moz-transform和-moz-transform-origin 说到IE的bug，一个臭名昭著的例子是它对于“盒模型”的错误解释：在IE5.x以及Quirks说到IE的bug，一个臭名昭著的例子是它对于“盒模型”的错误解释：在IE5.x以及QuirksIE6/7borderpaddingwidth型bug”？CSS3box-sizing定义box-sizing:content-box;时，浏览器对盒模型的解释遵从我们之前认识到W3C定义box-sizing:border-box;时，浏览器对盒模型的解释与IE6相同为什么说这个属性“迟来”呢？IE为什么说这个属性“迟来”呢？IEW3CborderpaddingboxFirefoxpadding值，就不得不重新计算box的width。现在IE6寿终正寝，这个CSS属性未免有些试用这个新属性，Firefox请使用-moz-box-sizing，Safari/WebKit-webkit-box-sizing，Opera直接用box-sizing些不符合W3C标准的旧浏览器的问题。CSS3备受期待是肯定的，CSSTricks做了一次投票，票选备受期待的CSS功能，一共有7000人参与，结果如下。有趣的是结果的#1)(22.0%,1,541期待的，然而IE仍然没有要支持这个功能的迹象。#2)22.0%,1,523#3)@font-face(21.0%,1,424Firefox的 #4)(12.0%,818Webkit之外的浏览器也开始支持这个功能，我们会看到很多令人惊讶的效果。#5)(8.0%,535Webkit#6)#6)Box(4.0%,271#7)RGBa3.0%,234#8)(2.0%,140#9)(2.0%,168 最近我因为要安装Firebug最近我因为要安装Firebug1.4Firefox3.5了首先我们看看wordpress2.8 这些都是CSS3属性,而不是 重..text-shadow:colortext-shadow:colorlengthlengthtext-shadow:-1px2px3px一些试验与 11#viSYSLOGD_OPTIONS="-m0"SYSLOGD_OPTIONS="-rm#vi/etc/init.d/syslog级联样式表在13CSS2.1标准在11年前被创建，显然我们现在已经与当年相差千里了。相当了不起的是期间开发有了多少进步——事实上，我们使用讨厌的hackJavaScriptCSS3特性和现代浏览器中可用的工具并将我们的设计品质带到下一个等级？择器会出问题。让我们的客户CSS3的优势(而且让旧浏览器更快的)是我们力所能及的事情——我们应该这样做，特别是在它能够让更加灵活并减少开发和成本的时最后，了解到从CSS3中我们能得到什么以及我们如何在我们的项目中使用它的新特CSS3将你的设计推向未来使用浏览器专有属性CSS3特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直CSS3属性。而且不幸的是，一些属性甚至到最后都可能当然，这种方法的劣势是，将导致一个杂乱的样式表和在浏览器之间的表现不一致。毕hackInternetExplorermarquee、blink以及其它在大量样式表中被应用，并在20；它们依然让现存的很多（在其他浏览器中）表现不一致甚至难以阅读。而我们现最常见的私有属性Webkit浏览器的(比如,Safari)，-webkit-开始，以以及InternetExplorer(-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀）至少可以考虑将他们和标准的CSS属性一起写到一个样式表中。Vendor-specificextensionsandW3CVendor-specificextensionstoCSS3Vendor-specificproperties选择CSS在中指定特定的HTML而不必使用多余的class、IDJavaScripts。而且它们中的大部分并不是CSS3中新添加的，而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的以及结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在中的classID数量并让设计师更方便的样式表。 top:0;right:0;display:block;width:140px;height:140px;text-indent:-} 和比如，给某个特定的div的同级的 添加一个灰色的边框(div和 div~imgborder:1pxsolid}或许在oddeven(对斑马样式的列表很完美)。所以如果你想匹配在第四个元后的一:nth-child(3n+4)background-color:ccc;*匹配第4,7,10,13,16,19...个元素:last- p:not([class*="lead"]){color:black;. #primary.textp:last-margin:}在InternetExplorerFirefox::selection伪元素。Safari,Opera和Chrome均支持。现在使用现在使用CSS3技术不需要CSS3W3CCSSCSS3border-radius，FirefoxSafari<divstyle="background-color:#ccc;-moz-border-radius: -webkit-border-radius:border:border:1pxsolid000padding:10px>FirefoxSafari-webkit-border-radiuswebkit（SafariChrome）实现圆角的私有-moz-border-radius-topright/-webkit-border-top-right--moz-border-radius-bottomleft/-webkit-border-bottom-left--moz-border-radius-bottomright/-webkit-border-bottom-right-css3css3css3css3jQuery#backgrounds-boxbackground:url(top-backgroundg.png)topleftno-repeat,url(bottom-backgroundg.png)bottombottomleftno-repeat,url(middle-backgroundg.png)leftrepeat-y;padding:}b{text-shadow:5px5px5px#666666;#rounded-corners-box-moz-border-radius-topleft:-moz-border-radius-topright:-moz-border-radius-bottomright:-moz-border-radius-bottomleft:-webkit-border-top-left-radius:-webkit-border-bottom-left-radius:}.div-name{background:#333333;opacity:0.8;width:380px;height:70px;jQueryCorners0.3 2+、Opera9.0+、InternetExplorer6+。jQueryCanvasRoundedHowHowToBorderImagewithCSS3andHowToCSSMultipleBackgrounds/BackgroundLayeringwithHowHowToDropShadowwithHowToText-shadowinInternetExplorerusingHowHowToElementGradientwithHowtoRoundedCornersin CSS3CSS3TemplateLayoutrealizedwithCreatingapolaroidphotoviewerwithCSS3and:AjQuerypluginforslicks屋老师的文章里说我现在的才刚刚进入力的巅峰期„„但是我的自信心仍然屡受打bigbangtheorys2pennyageofconan离在applicationUPDATE：solidotXD„„CSS3Media <linkmedia=“alland(orientation:portrait)”src="screen.css" @mediaalland(min-color:4){ 支持：Firefox3.5+,Safari3+,OperaCSS32D sprite.style['-webkit-transform']='rotate('+vw3c支持：Firefox3.5+,Safari替代/过渡：IE5.5+Matrix /en-transition-duration:animation-duration:animation-iteration-count:@keyframes'diagonal-支持：SafariCSS3Downloadable@font-facew3cMDC文档：支持：Firefox3.5+,Safari3.1+,Opera10.0+,附赠：其他CSS3property的兼容性ppk同 CSS3TransitionsandCSS HTML5DOMwindow.sessionStorage//可跨域，页关掉就清 支持：Firefox3.5+,Safari4.0+,IEHTML5OfflineApplication<htmlCACHEw3c支持：Firefox3.5+HTML5Database本地数据库，支持sql，最早是gears实现，现在的w3c草案的编辑也是的工程师„„但奇怪的是，gears的api跟现在的草案不兼容，chrome甚至为了保留的gearsapiwebkithtml5api在离线功能的时候又采用webkitapivardb=window.openDatabase("notes","","TheExampleNotes db.transaction(function(tx)tx.executeSql(‘SELECT*FROMNotes’,[],function(tx,rs) d/TP-CH3-SW1支持：Safari替代/过渡：Gears HTML5WebvarmyWorker=newmyWorker.onmessage=function(event){event.data支持：Firefox3.5+替代/过渡：Gears HTML5w3c支持：Firefox替代/过渡：Gears HTML5Dragand 支持：Firefox3.5+,Safari2.0+,Chrome1.0+,IEHTML5Audioand技术兴盛的基石，也是像flash这类封闭RIA容器最大的缺点。<<source<sourcevarctx=ctx.fillStyle支持：Firefox1.5+,Safari2.0+,Chrome1.0+,Opera替代/过渡：excanvas.jsIBM /支持：Firefox1.5+,Safari3.0+,Chrome1.0+,Opera替代/过渡：raphael.js/XMLHttpRequest支持：Firefox3.5+,Safari3.0+,ChromeHTML5ES标准的Canvas3D了，另外据说ieteam为支持canvas做了大量工作 api相当底层，特别是交互方面，不如svg直观，所以出现了很多封装它的库XRequest支持：Firefox3.5+（实现了部分）IE8.0+（实现了部分Access 知道是不是准备提交给w3c标准化的东西„„Access-Control-Allow-Messaging支持：Firefox3.5+,E4X(ECMA-FirefoxActionScript3jsonE4X好像都无所谓了～（瞎说的，其实在js代码里直接写dom对象而