html5css3認(rèn)識(shí)background-clip用來(lái)判斷是

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值之間用逗號(hào)分隔。background-paddingpositionpadding（"00"padding值則相對(duì)于內(nèi)容邊緣。與background-clip相同，多個(gè)值也用逗號(hào)分隔。如果background-clip是padding值，background-origin是border值，并且CSS3backgroundmodulebackground-clip默認(rèn)類(lèi)似于background-clip:border。background-originbackground-origin:padding。sucksIE6IE7（button）的背景相當(dāng)于：background-clip:border;hasLayout（button）的背景則相當(dāng)于：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（詳細(xì)見(jiàn)注釋buttonpadding:020px;border:3pxdouble#95071b;/*用3px邊來(lái)模擬設(shè)計(jì)圖中的白線*/}background-originbackground-originCSS 注：本文寫(xiě)于2006年1IE7、IE8Firefox3還未，文中所有說(shuō)的瀏覽器支持均在年的月和月，我先后了幾篇關(guān)于CSS2.1中選擇符的介紹文章。大體看來(lái)那幾篇文章中介紹過(guò)的大部分選擇符都已經(jīng)可以在像Mozilla/Firefox，Safari和Opera等現(xiàn)代瀏覽器中使用了。我們現(xiàn)在要做的就是等待InternetExplorer盡快趕上來(lái)，那我們就可以盡情地使用CSS2.1中的選擇符了。好在InternetExplorer在其第7個(gè)版本中已經(jīng)在盡力追趕CSS3新增選擇符是如何使用還是本文中對(duì)選擇符描述主要是參考了《年月日W3C 是 E:nth-of-type(n)匹配同類(lèi)型中的第n個(gè)同級(jí)兄弟元素URLE匹配所有用戶(hù)界面（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;}這時(shí)選擇符將匹配div#nav-primarydiv#content-primary。div[id*="content"]{background:#ff0;}和 版本的Mozilla、Firefox、Flock、Camino、Safari、url（一個(gè)#后面緊跟名稱(chēng)或者元素的id）指向的是文檔中的特定元素。何的片斷識(shí)別標(biāo)識(shí)，:target偽類(lèi)將不會(huì)匹配任何元素。會(huì)在他增加一個(gè)邊框：div#content-primary:target{outline:1pxsolid#300; UI元素狀態(tài)偽類(lèi)input[type="text"]:enabled{background:#ffc;}input[type="text"]:disabled{background:#ddd;}:CHECKED偽類(lèi):checked偽類(lèi)允許開(kāi)發(fā)者為處于選中狀態(tài)的checkbox和radio設(shè)定樣式。當(dāng)然這也要在瀏覽器允許改變表單控件外觀的條件下。下面的CSS規(guī)則將會(huì)使選中的radio和checkbox元素顯input:checked{border:1pxsolid#090; :ROOT偽類(lèi)的兩條規(guī)則其實(shí)是一樣的（大體上說(shuō)來(lái):root要比html更專(zhuān)業(yè)點(diǎn)。:root{background:#ff0;}html{background:#ff0;:NTH-CHILD()偽類(lèi)p:nth-child(3){color:#f00;元素的序號(hào)為1，因?yàn)橄旅娴囊?guī)則將會(huì)匹配第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瀏覽器支持這個(gè)選擇符甚至沒(méi)有瀏覽器支持nth類(lèi)的選擇符。如果有的話(huà)請(qǐng)幫我指正:nth-of-p，dudo：p:nth-of-type(3){background:#ff0;當(dāng)你想確定是否已經(jīng)指向了第三個(gè)p元素，這種方 就會(huì)不一樣，除非p所有的所有兄弟元素也都是p元素。:nth-last-of-type偽類(lèi)p:nth-last-of-type(2){background:#ff0;:last-child偽類(lèi)p:last-child{background:#ff0; :first-of-type偽類(lèi)p:first-of-type{background:#ff0;:last-of-type偽類(lèi)p:last-of-type{background:#ff0;:only-child偽類(lèi)p:only-child{backgound:#ff0;了:first-child（上面的規(guī)則會(huì)被匹配到文檔中所有第一個(gè)子元素p中。:only-of-type偽類(lèi)p:only-of-type{background:#ff0;:empty偽類(lèi)p:empty{background:#ff0所有元素。例如，下面的CSS將會(huì)指向所有不是p的元素：:not(p){border:1pxsolid#ccc;::selection偽類(lèi)::select{color:#f00;況，因此Safari還需要一點(diǎn)改進(jìn)?；贛ozilla的瀏覽器要使用 后。這條CSS規(guī)則將會(huì)匹配所有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，前兩個(gè)CSS2就有了，目前還是部分支持，但有趣的是IE6居然也支持。HSLcolors:除了支持RGB眼色外，還支持HSL（色相、飽和度、亮度。以前一般都是作圖的時(shí)候HSL譜，但這樣一來(lái)會(huì)包括的顏色。H度表示，S和L百分比表示，比如hsl(0,100%,50%)HSLAcolors:加了個(gè)不 用戶(hù)界面(User-interface)[att^=valval的att[att$=valval的att其它模塊：(Othermodules)mediaqueries:感覺(jué)叫 EricMeyer7CSS3EricMeyerCSS3CSSWeb2.05行開(kāi)始3的倍數(shù)行來(lái)還不另外，WebCool曾CSSAnEricMeyer7CSS3EricMeyerCSS3CSSWeb2.05行開(kāi)始3的倍數(shù)行來(lái)還不另外，WebCoolCSSCSS3CSSCSS3[EricMeyer]CSS3CSS2CSS3CSS35年前，CSS從另一方面講，你可以爭(zhēng)辯說(shuō)那個(gè)停頓期是有益的，讓瀏覽器廠商有時(shí)間去修復(fù)BUG樣接受。我覺(jué)得一些導(dǎo)致開(kāi)發(fā)的遲緩，這只是我的感覺(jué)，這也是我為什么離開(kāi)CSS工作組的原因。我現(xiàn)在只是偶爾被邀請(qǐng)從事一些別的W3C工作。CSSDOMJavaScriptCSSCSS而實(shí)現(xiàn)以前只能靠JavaScript實(shí)現(xiàn)的條紋式表格。JavaScriptCSSWeb不過(guò)，也有另外的一些趨勢(shì)，一些JS中的東西也被CSS工作組參考。JSCSSJSCSS這方面的文章。我們已經(jīng)看到人們使用JS讓瀏覽器，或者對(duì)一些過(guò)去的可性問(wèn)題進(jìn)行變通，通過(guò)JS實(shí)現(xiàn)HTML5和CSS3效果的日子也很快會(huì)到來(lái)。[Eric CSS3.1,CSS3.2,CSS1CSS2[EricMeyer]:是，那是個(gè)好主意。但我并不指望這個(gè)能實(shí)現(xiàn)因?yàn)檫@不現(xiàn)實(shí)。你只能用成成[EricMeyer]，CSS3的的《ThevisualdesignofWeb2.0》中提到“Roundedeverythingdon’tblametheroundedcornersW3C2002CSS3草案border-radiusHTML ><屬性：border-radius。它是上面四個(gè)屬性值的簡(jiǎn)寫(xiě)。值：<length>{1,4}[/<length>{1,4}]?如果斜線前后的值都存在，那么斜線前的值設(shè)置水平半徑，且斜線后的值設(shè)top-left、top-rightbottom-rightbottom-left序來(lái)設(shè)置的。如bottom-left省略，那么top-rightbottom-right省略，那么它等于top-left。如果top-right省略，那么它等于top-left。 border-radius也會(huì)導(dǎo)致該元素的背景也是圓的，即使bordernone。如果background-clippadding-box，則背景（background）會(huì)被曲線的內(nèi)邊裁剪。如果border-boxborderpadding 如果角的兩個(gè)相鄰邊有不同的寬度，那么這個(gè)角將會(huì)從寬的邊平滑過(guò)度到窄的邊。兩條相鄰邊顏色和樣式轉(zhuǎn)變的中心點(diǎn)是在一個(gè)和兩邊寬度成正比的角上。比如，兩 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>|具體每個(gè) -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}|每個(gè)屬性有1個(gè)或2個(gè)值，當(dāng)有兩個(gè)值時(shí)1個(gè)表示水平半徑，一個(gè)表示垂直半徑writing-mode改變也隨之而變。所以，Safari和Chrome中的圓角可以是橢webkitW3CCSS3草案2005年版本非常一致，和當(dāng)前的草webkit版本較低造成的。得到以khtml為 徑為0，即圓角失效，而不會(huì)像Firefox那樣同比率縮小。UEDblog和今天你帶傘了嗎??；A(chǔ)代碼如下：border-width:UEDblog和今天你帶傘了嗎??；A(chǔ)代碼如下：border-width:-moz-border-radius:-khtml-border-radius:border-radius:11px;兩者結(jié)合實(shí)現(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è)定了邊界的寬度，然后，每個(gè)邊界的 Firefox3.1,Safari 在使用這個(gè)功能了，如24Wayswebsite.-webkit-box-shadow:10px10px25px-moz-box-shadow:10px10px25pxbox-shadow:10px10px25pxXY10px，第3個(gè)屬性定義陰影的虛化程text-shadow:2px2px5px支持的瀏覽器：Firefox3.1SafariChromeBox，Opera文字陰影).前3個(gè)數(shù)字表示紅綠藍(lán)三色的值，最后一個(gè)值代表，另外，我們還可以使用opacity實(shí)現(xiàn)(目前的燈箱效果多使用該技巧-譯者)RGBA 實(shí)現(xiàn)(但在IE瀏覽器支持得并不好CSS3，可以直接實(shí)現(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自己指定字體，不過(guò)因?yàn)闋砍兜絾?wèn)題，實(shí)際能用的字體也是有限的(另外，體積龐大的中文字體也是一個(gè)不好解決的問(wèn)題-譯者)。@font-facesrc:url('/images/Anivers.otf')}Firefox3.1,Safari,Opera10andIE7怕麻煩，可以在IE實(shí)現(xiàn)這個(gè)功能，請(qǐng)參考：makefont-faceworkinIE)Safari。不幸的是，SafariFirefoxFirefox3.1CSS3FirefoxCSS3ChromeWebkitSafariSafariMacChromeWindows根據(jù)統(tǒng)計(jì)數(shù)據(jù)，2008年11月止，44.2%Firefox,3.1%Chrome,2.7%SafariCSS3InternetWeb圈子，這個(gè)比例可能更高，大約有73.6%(Blog.SpoonGraphics提供的數(shù)據(jù)) InternetExplorer:46%InternetCSS驗(yàn)證問(wèn)題:這些CSS3功能并非最終版本，目前不同的瀏覽器使用不同 功能，可能為你的StyleSheet帶來(lái)驗(yàn)證上的問(wèn)題。不當(dāng)?shù)氖褂?對(duì)這些效果的不當(dāng)使用，可能帶來(lái)一些不良

.3（Structuralpseudo-性和ID屬性的定義，使得文檔更加簡(jiǎn)潔。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"在上面的例子中，子元素的類(lèi)型都是單一的（li或者td），而下面這個(gè)例子中，子元素的類(lèi)型不再單一（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，不過(guò)，這些技術(shù)戶(hù)向你的場(chǎng)合。圓角效果-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塊陰影與文字陰影站在使用這個(gè)功能了，如24Wayswebsite.-webkit-box-shadow:10px10px25px-moz-box-shadow:10px10px25px#ccc;box-shadow:10px10px25px#ccc;XY10px，第3個(gè)屬性定義陰影的虛化程度，text-shadow:2px2px5px支持的瀏覽器：Firefox3.1,Safari,Chrome(只支持Box陰影)，Opera(只支持文字 opacity實(shí)現(xiàn) （目前的燈箱效果多使用該技巧-譯者）24W3CWorkingBox-shadowonCSS3.infoW3CWorkingDraftText-shadowon使用RGBA透明效目前，Web設(shè)計(jì)中的透明效果主要靠PNG 實(shí)現(xiàn)（但在IE瀏覽器支持得并不好-譯者在CSS3，可以直接實(shí)現(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字己指定字體，不過(guò)因?yàn)闋砍兜絾?wèn)題，實(shí)際能用的字體也是有限的(另外，體積龐大的中文字體也是一個(gè)不好解決的問(wèn)題-譯者)。@font-facesrc:url('/images/Anivers.otf')}Firefox3.1,Safari,Opera10andIE7煩，可以在IE實(shí)現(xiàn)這個(gè)功能，請(qǐng)參考：makefont-faceworkinIE)Fontsavailableforfont-faceembeddingFont-faceinIE,makingWebfontsworkWebfonts,thenextbigthing-AListFirefoxFirefox3.1CSS3MacChromeWindows根據(jù)統(tǒng)計(jì)數(shù)據(jù)，2008年11月止，44.2Firefox,3.1%Chrome,2.7%SafariCSS3InternetWeb子，這個(gè)比例可能更高，大約有73.6%（Blog.SpoonGraphics提供的數(shù)據(jù)）因上面講述的這些CSS3功能會(huì)給你的 InternetExplorer46InternetCSS StyleSheet 下面這個(gè)截圖是border屬性的幾種基本變化，通過(guò)對(duì)這幾種基本變化的延伸 border-left:20pxtransparentdotted;border-top:20pxgreensolid;border-right:20pxtransparentdotted;border-bottom:20pxorangesolid;overflow 一些需要折疊的面板中經(jīng)常見(jiàn)，這個(gè)也是用Border模仿出來(lái)的。 中才能看了。我暫時(shí)將它取名為幸運(yùn)轉(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">熱點(diǎn)跟蹤<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é)省時(shí)間的特性。盡管只有當(dāng)前了瀏覽器版本才能支持這些效果，但了解它們還是必須別圓角、不、陰影和調(diào)整元素大小。1：基本標(biāo)記 我們的xHTML需要一下div元素:#indie,應(yīng)用個(gè)別的幾個(gè)圓角. #resize,展示如何使用某種CSS來(lái)實(shí)現(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:個(gè)別的圓角#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:陰影效實(shí)現(xiàn)陰影也有很多方法，最常用的就是使用Photoshop制作成陰影 -webkit-box-shadow:3px5px10px下面我來(lái)解釋一下這四個(gè)值都代表什么，第一個(gè)3pxdiv元間的水平(橫向)距離，第二個(gè)5px指的是陰影與div之間的垂直(縱向)距離，第三個(gè)10px指的是陰影的#shadowborder:1pxsolid-webkit-box-shadow:3px5px10px}6:調(diào)整大在版本的CSS（Safari）看到本信息說(shuō)明該文是通過(guò)網(wǎng)頁(yè)教學(xué)（）整理發(fā)布的，請(qǐng)不要?jiǎng)h掉！屬性，比如”max-width”,“max-height”,“min-width”和“min-height”.#resizeborder:1pxsolid#000;resize:both;overflow:auto;}在這里主要說(shuō)一下resize和overflow屬性，resize:both;的意思就是所有邊都可以調(diào)整尺寸，它的值還有horizontal和vertical，顧名思義，就是橫向和縱向。而overflow是為了配合resize工作的，在這里使用auto.總怎么樣，你在這篇文章中有沒(méi)有什么收獲呢？雖然在僅有很少數(shù)的瀏覽器支持CSS3不可否認(rèn)的是CSS3的確會(huì)為我們的作節(jié)省 的間。如果對(duì)漸進(jìn)強(qiáng)有所解和認(rèn)， 受CSS3再 在IE6上了那只是的開(kāi)程。們就來(lái)“前瞻”一下CSS3的一個(gè)偽類(lèi)選擇器“:nth-child。較好地支持只有Opera9+和Safari3+。偽類(lèi):nth-child()的參數(shù)是an+b，如果按照上的描述，寫(xiě)成中文，很可能會(huì)讓人頭第一種：簡(jiǎn)單數(shù)字序號(hào)寫(xiě):nth-第第二種：倍數(shù)寫(xiě)法:nth-匹配所有倍數(shù)為a的元素。其中參數(shù)an中的字母n不可缺省，它是倍數(shù)寫(xiě)法的標(biāo)志，如3nli:nth-child(3n){background:orange;}/*把第3、第6、第9、?、所有3LI第三種：倍數(shù)分組匹配:nth-child(an+b)與:nth-child(an-為負(fù)號(hào)，此時(shí)匹配組內(nèi)的第a-b個(gè)。（其實(shí)an前面也可以是負(fù)號(hào)，但留給下一部分講。第四種：反向倍數(shù)分組匹配:nth-child(-個(gè)較為實(shí)用點(diǎn)，用來(lái)限定前面N個(gè)匹配常會(huì)用到*/第五種：奇偶匹配:nth-child(odd)與:nth- 隨著網(wǎng)絡(luò)的發(fā)展，CSSWeb隨著網(wǎng)絡(luò)的發(fā)展，CSSWebCSSborder-radius對(duì)于一些瀏覽器，它們有其私有的圓角屬性。如FFmoz-border-radius，SafariChromewebkit-border-radiusFFSafariChromeSafariChromeFirefox3.5HTML5CSS31 31 3<audio查 file.ogg"<123查 關(guān) safari和Opera瀏覽器支持CSS3的文字陰影。 性。這可以解決字符串過(guò)長(zhǎng)時(shí)的bug，相信很多網(wǎng)頁(yè)設(shè)計(jì)師都遇到過(guò)。 audioHTML 的最棒，chrome2.0beta的最棒，chrome2.0beta的支持也在不斷改進(jìn)。而firefox趣的話(huà)可以到firefox開(kāi)發(fā) 去查看。不過(guò)前端觀察會(huì)繼續(xù)跟進(jìn)firefox新版本的進(jìn)展-moz-transform和-moz-transform-origin 說(shuō)到IE的bug，一個(gè)臭名昭著的例子是它對(duì)于“盒模型”的錯(cuò)誤解釋?zhuān)涸贗E5.x以及Quirks說(shuō)到IE的bug，一個(gè)臭名昭著的例子是它對(duì)于“盒模型”的錯(cuò)誤解釋?zhuān)涸贗E5.x以及QuirksIE6/7borderpaddingwidth型bug”？CSS3box-sizing定義box-sizing:content-box;時(shí)，瀏覽器對(duì)盒模型的解釋遵從我們之前認(rèn)識(shí)到W3C定義box-sizing:border-box;時(shí)，瀏覽器對(duì)盒模型的解釋與IE6相同為什么說(shuō)這個(gè)屬性“遲來(lái)”呢？IE為什么說(shuō)這個(gè)屬性“遲來(lái)”呢？IEW3CborderpaddingboxFirefoxpadding值，就不得不重新計(jì)算box的width?，F(xiàn)在IE6壽終正寢，這個(gè)CSS屬性未免有些試用這個(gè)新屬性，F(xiàn)irefox請(qǐng)使用-moz-box-sizing，Safari/WebKit-webkit-box-sizing，Opera直接用box-sizing些不符合W3C標(biāo)準(zhǔn)的舊瀏覽器的問(wèn)題。CSS3備受期待是肯定的，CSSTricks做了一次投票，票選備受期待的CSS功能，一共有7000人參與，結(jié)果如下。有趣的是結(jié)果的#1)(22.0%,1,541期待的，然而IE仍然沒(méi)有要支持這個(gè)功能的跡象。#2)22.0%,1,523#3)@font-face(21.0%,1,424Firefox的 #4)(12.0%,818Webkit之外的瀏覽器也開(kāi)始支持這個(gè)功能，我們會(huì)看到很多令人驚訝的效果。#5)(8.0%,535Webkit#6)#6)Box(4.0%,271#7)RGBa3.0%,234#8)(2.0%,140#9)(2.0%,168 最近我因?yàn)橐惭bFirebug最近我因?yàn)橐惭bFirebug1.4Firefox3.5了首先我們看看wordpress2.8 這些都是CSS3屬性,而不是 重..text-shadow:colortext-shadow:colorlengthlengthtext-shadow:-1px2px3px一些試驗(yàn)與 11#viSYSLOGD_OPTIONS="-m0"SYSLOGD_OPTIONS="-rm#vi/etc/init.d/syslog級(jí)聯(lián)樣式表在13CSS2.1標(biāo)準(zhǔn)在11年前被創(chuàng)建，顯然我們現(xiàn)在已經(jīng)與當(dāng)年相差千里了。相當(dāng)了不起的是期間開(kāi)發(fā)有了多少進(jìn)步——事實(shí)上，我們使用討厭的hackJavaScriptCSS3特性和現(xiàn)代瀏覽器中可用的工具并將我們的設(shè)計(jì)品質(zhì)帶到下一個(gè)等級(jí)？擇器會(huì)出問(wèn)題。讓我們的客戶(hù)CSS3的優(yōu)勢(shì)(而且讓舊瀏覽器更快的)是我們力所能及的事情——我們應(yīng)該這樣做，特別是在它能夠讓更加靈活并減少開(kāi)發(fā)和成本的時(shí)最后，了解到從CSS3中我們能得到什么以及我們?nèi)绾卧谖覀兊捻?xiàng)目中使用它的新特CSS3將你的設(shè)計(jì)推向未來(lái)使用瀏覽器專(zhuān)有屬性CSS3特性，我們不得不與原來(lái)的屬性一起使用生產(chǎn)商專(zhuān)有擴(kuò)展。原因是直CSS3屬性。而且不幸的是，一些屬性甚至到最后都可能當(dāng)然，這種方法的劣勢(shì)是，將導(dǎo)致一個(gè)雜亂的樣式表和在瀏覽器之間的表現(xiàn)不一致。畢hackInternetExplorermarquee、blink以及其它在大量樣式表中被應(yīng)用，并在20；它們依然讓現(xiàn)存的很多（在其他瀏覽器中）表現(xiàn)不一致甚至難以閱讀。而我們現(xiàn)最常見(jiàn)的私有屬性Webkit瀏覽器的(比如,Safari)，-webkit-開(kāi)始，以以及InternetExplorer(-ms-)都有它們自己的屬性擴(kuò)展（目前只有IE8支持-ms-前綴）至少可以考慮將他們和標(biāo)準(zhǔn)的CSS屬性一起寫(xiě)到一個(gè)樣式表中。Vendor-specificextensionsandW3CVendor-specificextensionstoCSS3Vendor-specificproperties選擇CSS在中指定特定的HTML而不必使用多余的class、IDJavaScripts。而且它們中的大部分并不是CSS3中新添加的，而是沒(méi)有被得到應(yīng)有的廣泛應(yīng)用。如果你在嘗試實(shí)現(xiàn)一個(gè)干凈的、輕量級(jí)的以及結(jié)構(gòu)與表現(xiàn)更好的分離，高級(jí)選擇器是非常有用的。它們可以減少在中的classID數(shù)量并讓設(shè)計(jì)師更方便的樣式表。 top:0;right:0;display:block;width:140px;height:140px;text-indent:-} 和比如，給某個(gè)特定的div的同級(jí)的 添加一個(gè)灰色的邊框(div和 div~imgborder:1pxsolid}或許在oddeven(對(duì)斑馬樣式的列表很完美)。所以如果你想匹配在第四個(gè)元后的一:nth-child(3n+4)background-color:ccc;*匹配第4,7,10,13,16,19...個(gè)元素:last- p:not([class*="lead"]){color:black;. #primary.textp:last-margin:}在InternetExplorerFirefox::selection偽元素。Safari,Opera和Chrome均支持。現(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）實(shí)現(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屋老師的文章里說(shuō)我現(xiàn)在的才剛剛進(jì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替代/過(guò)渡：IE5.5+Matrix /en-transition-duration:animation-duration:animation-iteration-count:@keyframes'diagonal-支持：SafariCSS3Downloadable@font-facew3cMDC文檔：支持：Firefox3.5+,Safari3.1+,Opera10.0+,附贈(zèng)：其他CSS3property的兼容性ppk同 CSS3TransitionsandCSS HTML5DOMwindow.sessionStorage//可跨域，頁(yè)關(guān)掉就清 支持：Firefox3.5+,Safari4.0+,IEHTML5OfflineApplication<htmlCACHEw3c支持：Firefox3.5+HTML5Database本地?cái)?shù)據(jù)庫(kù)，支持sql，最早是gears實(shí)現(xiàn)，現(xiàn)在的w3c草案的編輯也是的工程師??但奇怪的是，gears的api跟現(xiàn)在的草案不兼容，chrome甚至為了保留的gearsapiwebkithtml5api在離線功能的時(shí)候又采用webkitapivardb=window.openDatabase("notes","","TheExampleNotes db.transaction(function(tx)tx.executeSql(‘SELECT*FROMNotes’,[],function(tx,rs) d/TP-CH3-SW1支持：Safari替代/過(guò)渡：Gears HTML5WebvarmyWorker=newmyWorker.onmessage=function(event){event.data支持：Firefox3.5+替代/過(guò)渡：Gears HTML5w3c支持：Firefox替代/過(guò)渡：Gears HTML5Dragand 支持：Firefox3.5+,Safari2.0+,Chrome1.0+,IEHTML5Audioand技術(shù)興盛的基石，也是像flash這類(lèi)封閉RIA容器最大的缺點(diǎn)。<<source<sourcevarctx=ctx.fillStyle支持：Firefox1.5+,Safari2.0+,Chrome1.0+,Opera替代/過(guò)渡：excanvas.jsIBM /支持：Firefox1.5+,Safari3.0+,Chrome1.0+,Opera替代/過(guò)渡：raphael.js/XMLHttpRequest支持：Firefox3.5+,Safari3.0+,ChromeHTML5ES標(biāo)準(zhǔn)的Canvas3D了，另外據(jù)說(shuō)ieteam為支持canvas做了大量工作 api相當(dāng)?shù)讓?，特別是交互方面，不如svg直觀，所以出現(xiàn)了很多封裝它的庫(kù)XRequest支持：Firefox3.5+（實(shí)現(xiàn)了部分）IE8.0+（實(shí)現(xiàn)了部分Access 知道是不是準(zhǔn)備提交給w3c標(biāo)準(zhǔn)化的東西??Access-Control-Allow-Messaging支持：Firefox3.5+,E4X(ECMA-FirefoxActionScript3jsonE4X好像都無(wú)所謂了～（瞎說(shuō)的，其實(shí)在js代碼里直接寫(xiě)dom對(duì)象而