不用图像也能构造圆角框

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

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

2、ss="r2"></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>An

3、dhere'sitthebasicCSS:.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,sinceitcouldbe

4、nestedinalmosteverykindoftagmaintingthemarkupvalid.Sothechoicefellonbbecauseitdoesn'thavesemanticalmeaningandit'sshorterthanspan,likeEricMeyersaid.Thetechniqueents.ItfailsonelementcouldbeeasilysolvedentthathasbeenroundedinOpera,andIE(bothMacversion6PC)essuponfloatedelementsodernbr

5、ouchbetter.Lookingforpleages,sparingabout6-8KbofpageanticmarkupandaintaintheHTMLcleanandlight.NiftyCornersentsakingsomefunctionstogetroundedcornersonalmosteveryelementonthepagethebasicrulesplethesourcecode,noextramarkupisinit.ThesolutionisabinationofCSSandJavascript.Thetechniqueis

6、madeupoffouressentialparts: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.Ifthe

8、testhaspassed,theRoundedfunctioni