不用图像也能构造圆角框--.

《不用图像也能构造圆角框--.》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、不用图像也能构造圆角框>>.本篇详细介绍了不用图像也能构造圆角框的文章主题,由于未翻译,阅读起来有点困难~~~。StripeittogetitroundedThebasicideaofNiftyCornersistogetsomecouloredlinestogettheroundedeffect.Thisisthemarkuptogetaroundeddiv:<divid="container"><bclass="rtop"><bclass="r1"></b><bclass="r2"><

2、;/b><bclass="r3"></b><bclass="r4"></b></b><!--contentgoeshere--><bclass="rbottom"><bclass="r4"></b><bclass="r3"></b><bclass="r2"></b><bclass="r1"></b></b></div>Andhere'sitthe

3、basicCSS:.rtop,.rbottom{display:block}.rtop*,.rbottom*{display:block;height:1px;overfloargin:05px}.r2{margin:03px}.r3{margin:02px}.r4{margin:01px;height:2px}Youcanseethefinaleffectonthissimpleexample.Afeent.Ineededaninlineelementtoobtaintheroundedcorners,sinceitcouldbenestedinal

4、mosteverykindoftagmaintingthemarkupvalid.Sothechoicefellonbbecauseitdoesn'thavesemanticalmeaningandit'sshorterthanspan,likeEricMeyersaid.Thetechniqueents.ItfailsonelementcouldbeeasilysolvedentthathasbeenroundedinOpera,andIE(bothMacversion6PC)essuponfloatedelementsodernbrouchbett

5、er.Lookingforpleages,sparingabout6-8KbofpageanticmarkupandaintaintheHTMLcleanandlight.NiftyCornersentsakingsomefunctionstogetroundedcornersonalmosteveryelementonthepagethebasicrulesplethesourcecode,noextramarkupisinit.ThesolutionisabinationofCSSandJavascript.Thetechniqueismadeup

6、offouressentialparts:1.CSSfileforthescreen2.CSSfilefortheprint3.JavascriptlibrarytogetNiftyCorners4.thejavascriptcallstoroundtheelementsyouwantThefirstthreeponentsjustdon'tneedchanges,whatever1234下一页[这篇文章来自..，]youedia="print"><scripttype="text/javascript"src="nifty.js">

7、</script>Tounderstandhoplementthefourthpart,youneedfirsttounderstandhoplemented.Don'tple,you'llnoticethatIleftembeddedtheCSSandpartofthejavascripttoshobeddedjavascriptcode:<scripttype="text/javascript">sacheckforDOMsupportandexcludesIE5.xPCforrunningthescript.Ifthete

8、sthaspassed,theRoundedfunctioniscalled.Itaccept