html5css3認識background-clip用來判斷是

background-clipbackground-originCSS3backgroundmodulebackground-clipbackgroundborderbackground-background-positionbackground-clip:[border|padding][,[border|padding]]*background-origin:[border|padding|content][,[border|padding|background-值，則background包括border區(qū)域。如果background-image background-clip值之間用逗號分隔。background-paddingpositionpadding（"00"padding值則相對于內(nèi)容邊緣。與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邊來模擬設(shè)計圖中的白線*/}background-originbackground-originCSS 注：本文寫于2006年1IE7、IE8Firefox3還未，文中所有說的瀏覽器支持均在年的月和月，我先后了幾篇關(guān)于CSS2.1中選擇符的介紹文章。大體看來那幾篇文章中介紹過的大部分選擇符都已經(jīng)可以在像Mozilla/Firefox，Safari和Opera等現(xiàn)代瀏覽器中使用了。我們現(xiàn)在要做的就是等待InternetExplorer盡快趕上來，那我們就可以盡情地使用CSS2.1中的選擇符了。好在InternetExplorer在其第7個版本中已經(jīng)在盡力追趕CSS3新增選擇符是如何使用還是本文中對選擇符描述主要是參考了《年月日W3C 是 E:nth-of-type(n)匹配同類型中的第n個同級兄弟元素URLE匹配所有用戶界面（form）中處于可用狀態(tài)的E元素E表單E~ 器假設(shè)HTML文檔中包含下面的代碼結(jié)構(gòu)：<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元素狀態(tài)偽類input[type="text"]:enabled{background:#ffc;}input[type="text"]:disabled{background:#ddd;}:CHECKED偽類:checked偽類允許開發(fā)者為處于選中狀態(tài)的checkbox和radio設(shè)定樣式。當然這也要在瀏覽器允許改變表單控件外觀的條件下。下面的CSS規(guī)則將會使選中的radio和checkbox元素顯input:checked{border:1pxsolid#090; :ROOT偽類的兩條規(guī)則其實是一樣的（大體上說來:root要比html更專業(yè)點。:root{background:#ff0;}html{background:#ff0;:NTH-CHILD()偽類p:nth-child(3){color:#f00;元素的序號為1，因為下面的規(guī)則將會匹配第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;當你想確定是否已經(jīng)指向了第三個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（上面的規(guī)則會被匹配到文檔中所有第一個子元素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規(guī)則將會匹配所有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和所在區(qū)域的寬度、高度，以及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的倍數(shù)行來還不另外，WebCool曾CSSAnEricMeyer7CSS3EricMeyerCSS3CSSWeb2.05行開始3的倍數(shù)行來還不另外，WebCoolCSSCSS3CSSCSS3[EricMeyer]CSS3CSS2CSS3CSS35年前，CSS從另一方面講，你可以爭辯說那個停頓期是有益的，讓瀏覽器廠商有時間去修復BUG樣接受。我覺得一些導致開發(fā)的遲緩，這只是我的感覺，這也是我為什么離開CSS工作組的原因。我現(xiàn)在只是偶爾被邀請從事一些別的W3C工作。CSSDOMJavaScriptCSSCSS而實現(xiàn)以前只能靠JavaScript實現(xiàn)的條紋式表格。JavaScriptCSSWeb不過，也有另外的一些趨勢，一些JS中的東西也被CSS工作組參考。JSCSSJSCSS這方面的文章。我們已經(jīng)看到人們使用JS讓瀏覽器，或者對一些過去的可性問題進行變通，通過JS實現(xiàn)HTML5和CSS3效果的日子也很快會到來。[Eric CSS3.1,CSS3.2,CSS1CSS2[EricMeyer]:是，那是個好主意。但我并不指望這個能實現(xiàn)因為這不現(xiàn)實。你只能用成成[EricMeyer]，CSS3的的《ThevisualdesignofWeb2.0》中提到“Roundedeverythingdon’tblametheroundedcornersW3C2002CSS3草案border-radiusHTML ><屬性：border-radius。它是上面四個屬性值的簡寫。值：<length>{1,4}[/<length>{1,4}]?如果斜線前后的值都存在，那么斜線前的值設(shè)置水平半徑，且斜線后的值設(shè)top-left、top-rightbottom-rightbottom-left序來設(shè)置的。如bottom-left省略，那么top-rightbottom-right省略，那么它等于top-left。如果top-right省略，那么它等于top-left。 border-radius也會導致該元素的背景也是圓的，即使bordernone。如果background-clippadding-box，則背景（background）會被曲線的內(nèi)邊裁剪。如果border-boxborderpadding 如果角的兩個相鄰邊有不同的寬度，那么這個角將會從寬的邊平滑過度到窄的邊。兩條相鄰邊顏色和樣式轉(zhuǎn)變的中心點是在一個和兩邊寬度成正比的角上。比如，兩 right,bottom,left}，Ltop=Lbottom=所在矩形區(qū)域的寬，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和今天你帶傘了嗎??；A(chǔ)代碼如下：border-width:UEDblog和今天你帶傘了嗎??；A(chǔ)代碼如下：border-width:-moz-border-radius:-khtml-border-radius:border-radius:11px;兩者結(jié)合實現(xiàn)的組件Cornerz。CSSCSS3HTML5Web5CSS3Web。目前這些技術(shù)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設(shè)定了邊界的寬度，然后，每個邊界的 Firefox3.1,Safari 在使用這個功能了，如24Wayswebsite.-webkit-box-shadow:10px10px25px-moz-box-shadow:10px10px25pxbox-shadow:10px10px25pxXY10px，第3個屬性定義陰影的虛化程text-shadow:2px2px5px支持的瀏覽器：Firefox3.1SafariChromeBox，Opera文字陰影).前3個數(shù)字表示紅綠藍三色的值，最后一個值代表，另外，我們還可以使用opacity實現(xiàn)(目前的燈箱效果多使用該技巧-譯者)RGBA 實現(xiàn)(但在IE瀏覽器支持得并不好CSS3，可以直接實現(xiàn)透明效果。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實現(xiàn)這個功能，請參考：makefont-faceworkinIE)Safari。不幸的是，SafariFirefoxFirefox3.1CSS3FirefoxCSS3ChromeWebkitSafariSafariMacChromeWindows根據(jù)統(tǒng)計數(shù)據(jù)，2008年11月止，44.2%Firefox,3.1%Chrome,2.7%SafariCSS3InternetWeb圈子，這個比例可能更高，大約有73.6%(Blog.SpoonGraphics提供的數(shù)據(jù)) InternetExplorer:46%InternetCSS驗證問題:這些CSS3功能并非最終版本，目前不同的瀏覽器使用不同 功能，可能為你的StyleSheet帶來驗證上的問題。不當?shù)氖褂?對這些效果的不當使用，可能帶來一些不良

.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，公式，匹配所有奇數(shù)行*/tr:nth-child(odd){??}/*odd：關(guān)鍵字，匹配所有奇數(shù)行*/tr:nth-child(2n){??} /*2n：匹配所有偶數(shù)行*/tr:nth-child(even)}/*even：li xhtml如下：<ol#sample1li:nth-child(even){/*sample1的子元素li*/background:#FF9;/*也可以設(shè)定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，不過，這些技術(shù)戶向你的場合。圓角效果-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實現(xiàn) （目前的燈箱效果多使用該技巧-譯者）24W3CWorkingBox-shadowonCSS3.infoW3CWorkingDraftText-shadowon使用RGBA透明效目前，Web設(shè)計中的透明效果主要靠PNG 實現(xiàn)（但在IE瀏覽器支持得并不好-譯者在CSS3，可以直接實現(xiàn)透明效果。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實現(xiàn)這個功能，請參考：makefont-faceworkinIE)Fontsavailableforfont-faceembeddingFont-faceinIE,makingWebfontsworkWebfonts,thenextbigthing-AListFirefoxFirefox3.1CSS3MacChromeWindows根據(jù)統(tǒng)計數(shù)據(jù)，2008年11月止，44.2Firefox,3.1%Chrome,2.7%SafariCSS3InternetWeb子，這個比例可能更高，大約有73.6%（Blog.SpoonGraphics提供的數(shù)據(jù)）因上面講述的這些CSS3功能會給你的 InternetExplorer46InternetCSS StyleSheet 下面這個截圖是border屬性的幾種基本變化，通過對這幾種基本變化的延伸 border-left:20pxtransparentdotted;border-top:20pxgreensolid;border-right:20pxtransparentdotted;border-bottom:20pxorangesolid;overflow 一些需要折疊的面板中經(jīng)常見，這個也是用Border模仿出來的。 中才能看了。我暫時將它取名為幸運轉(zhuǎn)輪吧！ 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">產(chǎn)品新聞 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 節(jié)省時間的特性。盡管只有當前了瀏覽器版本才能支持這些效果，但了解它們還是必須別圓角、不、陰影和調(diào)整元素大小。1：基本標記 我們的xHTML需要一下div元素:#indie,應(yīng)用個別的幾個圓角. #resize,展示如何使用某種CSS來實現(xiàn)重設(shè)大小的效果.<!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:陰影效實現(xiàn)陰影也有很多方法，最常用的就是使用Photoshop制作成陰影 -webkit-box-shadow:3px5px10px下面我來解釋一下這四個值都代表什么，第一個3pxdiv元間的水平(橫向)距離，第二個5px指的是陰影與div之間的垂直(縱向)距離，第三個10px指的是陰影的#shadowborder:1pxsolid-webkit-box-shadow:3px5px10px}6:調(diào)整大在版本的CSS（Safari）看到本信息說明該文是通過網(wǎng)頁教學（）整理發(fā)布的，請不要刪掉！屬性，比如”max-width”,“max-height”,“min-width”和“min-height”.#resizeborder:1pxsolid#000;resize:both;overflow:auto;}在這里主要說一下resize和overflow屬性，resize:both;的意思就是所有邊都可以調(diào)整尺寸，它的值還有horizontal和vertical，顧名思義，就是橫向和縱向。而overflow是為了配合resize工作的，在這里使用auto.總怎么樣，你在這篇文章中有沒有什么收獲呢？雖然在僅有很少數(shù)的瀏覽器支持CSS3不可否認的是CSS3的確會為我們的作節(jié)省 的間。如果對漸進強有所解和認， 受CSS3再 在IE6上了那只是的開程。們就來“前瞻”一下CSS3的一個偽類選擇器“:nth-child。較好地支持只有Opera9+和Safari3+。偽類:nth-child()的參數(shù)是an+b，如果按照上的描述，寫成中文，很可能會讓人頭第一種：簡單數(shù)字序號寫:nth-第第二種：倍數(shù)寫法:nth-匹配所有倍數(shù)為a的元素。其中參數(shù)an中的字母n不可缺省，它是倍數(shù)寫法的標志，如3nli:nth-child(3n){background:orange;}/*把第3、第6、第9、?、所有3LI第三種：倍數(shù)分組匹配:nth-child(an+b)與:nth-child(an-為負號，此時匹配組內(nèi)的第a-b個。（其實an前面也可以是負號，但留給下一部分講。第四種：反向倍數(shù)分組匹配:nth-child(-個較為實用點，用來限定前面N個匹配常會用到*/第五種：奇偶匹配:nth-child(odd)與:nth- 隨著網(wǎng)絡(luò)的發(fā)展，CSSWeb隨著網(wǎng)絡(luò)的發(fā)展，CSSWebCSSborder-radius對于一些瀏覽器，它們有其私有的圓角屬性。如FFmoz-border-radius，SafariChromewebkit-border-radiusFFSafariChromeSafariChromeFirefox3.5HTML5CSS31 31 3<audio查 file.ogg"<123查 關(guān) safari和Opera瀏覽器支持CSS3的文字陰影。 性。這可以解決字符串過長時的bug，相信很多網(wǎng)頁設(shè)計師都遇到過。 audioHTML 的最棒，chrome2.0beta的最棒，chrome2.0beta的支持也在不斷改進。而firefox趣的話可以到firefox開發(fā) 去查看。不過前端觀察會繼續(xù)跟進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?，F(xiàn)在IE6壽終正寢，這個CSS屬性未免有些試用這個新屬性，F(xiàn)irefox請使用-moz-box-sizing，Safari/WebKit-webkit-box-sizing，Opera直接用box-sizing些不符合W3C標準的舊瀏覽器的問題。CSS3備受期待是肯定的，CSSTricks做了一次投票，票選備受期待的CSS功能，一共有7000人參與，結(jié)果如下。有趣的是結(jié)果的#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級聯(lián)樣式表在13CSS2.1標準在11年前被創(chuàng)建，顯然我們現(xiàn)在已經(jīng)與當年相差千里了。相當了不起的是期間開發(fā)有了多少進步——事實上，我們使用討厭的hackJavaScriptCSS3特性和現(xiàn)代瀏覽器中可用的工具并將我們的設(shè)計品質(zhì)帶到下一個等級？擇器會出問題。讓我們的客戶CSS3的優(yōu)勢(而且讓舊瀏覽器更快的)是我們力所能及的事情——我們應(yīng)該這樣做，特別是在它能夠讓更加靈活并減少開發(fā)和成本的時最后，了解到從CSS3中我們能得到什么以及我們?nèi)绾卧谖覀兊捻椖恐惺褂盟男绿谻SS3將你的設(shè)計推向未來使用瀏覽器專有屬性CSS3特性，我們不得不與原來的屬性一起使用生產(chǎn)商專有擴展。原因是直CSS3屬性。而且不幸的是，一些屬性甚至到最后都可能當然，這種方法的劣勢是，將導致一個雜亂的樣式表和在瀏覽器之間的表現(xiàn)不一致。畢hackInternetExplorermarquee、blink以及其它在大量樣式表中被應(yīng)用，并在20；它們依然讓現(xiàn)存的很多（在其他瀏覽器中）表現(xiàn)不一致甚至難以閱讀。而我們現(xiàn)最常見的私有屬性Webkit瀏覽器的(比如,Safari)，-webkit-開始，以以及InternetExplorer(-ms-)都有它們自己的屬性擴展（目前只有IE8支持-ms-前綴）至少可以考慮將他們和標準的CSS屬性一起寫到一個樣式表中。Vendor-specificextensionsandW3CVendor-specificextensionstoCSS3Vendor-specificproperties選擇CSS在中指定特定的HTML而不必使用多余的class、IDJavaScripts。而且它們中的大部分并不是CSS3中新添加的，而是沒有被得到應(yīng)有的廣泛應(yīng)用。如果你在嘗試實現(xiàn)一個干凈的、輕量級的以及結(jié)構(gòu)與表現(xiàn)更好的分離，高級選擇器是非常有用的。它們可以減少在中的classID數(shù)量并讓設(shè)計師更方便的樣式表。 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均支持?，F(xiàn)在使用現(xiàn)在使用CSS3技術(shù)不需要CSS3W3CCSSCSS3border-radius，F(xiàn)irefoxSafari<divstyle="background-color:#ccc;-moz-border-radius: -webkit-border-radius:border:border:1pxsolid000padding:10px>FirefoxSafari-webkit-border-radiuswebkit（SafariChrome）實現(xiàn)圓角的私有-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屋老師的文章里說我現(xiàn)在的才剛剛進入力的巔峰期??但是我的自信心仍然屢受打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//可跨域，頁關(guān)掉就清 支持：Firefox3.5+,Safari4.0+,IEHTML5OfflineApplication<htmlCACHEw3c支持：Firefox3.5+HTML5Database本地數(shù)據(jù)庫，支持sql，最早是gears實現(xiàn)，現(xiàn)在的w3c草案的編輯也是的工程師??但奇怪的是，gears的api跟現(xiàn)在的草案不兼容，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技術(shù)興盛的基石，也是像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了，另外據(jù)說ieteam為支持canvas做了大量工作 api相當?shù)讓樱貏e是交互方面，不如svg直觀，所以出現(xiàn)了很多封裝它的庫XRequest支持：Firefox3.5+（實現(xiàn)了部分）IE8.0+（實現(xiàn)了部分Access 知道是不是準備提交給w3c標準化的東西??Access-Control-Allow-Messaging支持：Firefox3.5+,E4X(ECMA-FirefoxActionScript3jsonE4X好像都無所謂了～（瞎說的，其實在js代碼里直接寫dom對象而