7種CSS圓角框解決方案_第1頁
7種CSS圓角框解決方案_第2頁
7種CSS圓角框解決方案_第3頁
7種CSS圓角框解決方案_第4頁
7種CSS圓角框解決方案_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

7種CSS圓角框解決方案草Young年華.本站所有內(nèi)容都來自網(wǎng)絡(luò)，其版權(quán)歸屬原作者所有，如果您喜歡本書請購買正版。本文探討的是前端設(shè)計種最常用的頁面圓角框效果的7種不同方法實(shí)現(xiàn)解決方案，其核心關(guān)鍵詞是“圓滑、完美、兼容、重用性、語義”，這些技術(shù)都是收集目前網(wǎng)絡(luò)上最流行的做法。縱觀種種方法，各有其優(yōu)勢，請針對不同的環(huán)境分別使用。圓角框，因為其樣式比直角框漂亮，所以成為設(shè)計師心中偏愛的設(shè)計元素。現(xiàn)在的web標(biāo)準(zhǔn)下大量的網(wǎng)頁、博客都采用圓角框設(shè)計，成為一道亮麗的風(fēng)景線。然而，就是這個圓角，卻成為了網(wǎng)頁前端人員心中永遠(yuǎn)抹之不去的陰影，對它，可以說是又痛又愛。愛的是它的漂亮，痛的是要讓它兼容通行于各種不同的瀏覽器卻成為一個永遠(yuǎn)的神話。讓我們來回顧一下目前網(wǎng)絡(luò)流行的都有哪些解決方案。無圖片純css圓角框收錄理由：兼容性強(qiáng)，不用圖形BasedonN訐tyCornersByAlessandroFulcihttpi/Zpro-htmLit/esempio/nifty/RoundedborderswithoutLoremipsumdolorsitannetjconsectetueralaoreetdoloremagnaaliquameratvolutpatullamcorpersuscipitlobortisnisiutaliquipDuisautemveleumiriuredolorinhendrerieufeugiatnullafacilisisatveroerosetacczzrildelenitaugueduisdoloretefeugaitnu圖一特點(diǎn)：不用任何圖形，使用很多個div容器模擬出圓角效果。兼容性：通殺所有瀏覽器缺點(diǎn)：構(gòu)造這個圓角需要加入太多的無語義的標(biāo)簽，結(jié)構(gòu)比較冗余。重用性不強(qiáng)：如果一個頁面有多個圓角，并且要實(shí)現(xiàn)不同的半徑大小則其靈活性不夠。邊框顏色雖然可以調(diào)節(jié)，但會對頁面中的結(jié)構(gòu)產(chǎn)生致命的影響，適用于色彩單一并且一個頁面中圓角應(yīng)用不多的頁面。不容易實(shí)現(xiàn)圓弧內(nèi)有漸變色的圖形背景。圓角框不夠圓滑，有鋸齒現(xiàn)象，適合于背景色和當(dāng)前色色差不大并且圓弧較小的網(wǎng)頁。實(shí)現(xiàn)原理：用很多1像素高的div容器，利用背景色和邊框色來模擬出圓角框的輪廓線。實(shí)例演示：http://www.cssplay.co.uk/boxes/snazzy.html無圖片純css圓角框，用特殊字符（&bull）收錄理由：圓滑，不用圖形Iknowit'sbeendonebeforejbutnotthisway!Aboxwithcurvedcornersintowhichyoucanputtextthatgoesrightuptothecomers.Again^nographicswereusedinthemakingofthisdemonstration.Allittakesisfourquadrantsofabulletpointpositionedabsolutelyineachcorner(arialfontthistimeasit'sthesafestonetouse).圖二特點(diǎn)：不用任何圖形，使用特殊字符•(圓點(diǎn))模擬出圓角。兼容性：通殺所有瀏覽器圓角平滑缺點(diǎn)：構(gòu)造這個圓角一樣需要加入無語義的標(biāo)簽，結(jié)構(gòu)冗余，同第一種一樣。重用性不強(qiáng)：如果一個頁面有多個圓角，并且要實(shí)現(xiàn)不同的半徑大小，需要調(diào)整四個角圖片的定位，并且字符大小對其有影響，靈活性不夠。顏色雖可調(diào)節(jié)，但要求里面的背景色和字符的顏色相同，不能做成邊框線條。適用于色彩單一并且一個頁面中圓角不是太多的頁面。一樣不容易實(shí)現(xiàn)圓弧內(nèi)有漸變色的圖形背景。實(shí)現(xiàn)原理：用特殊字符（&bull）,利用定位，截取四分之一圓模擬出圓角框的一個角圖片。實(shí)例演示：http://www.cssplay.co.uk/boxes/curves.html圖片圓角框收錄理由：兼容性強(qiáng)，可以表現(xiàn)很復(fù)雜的圓角效果。BOTTOMLEFTSQUARECORNERThisistheplacetoputyourdescriptivetext.Thethreecurvedcornersandonesquarecornerboxrequiresnoextramarkupjjustastandarddefinitionlistwiththreebackgroundimages.TOPLEFTSQUARECORNERThisistheplacetoputyourdescriptivetext.Thethreecurvedcornersandonesquarecornerboxrequiresnoextramarkupjjustastandarddefinitionlistwiththreebackgroundimages.圖三特點(diǎn)：使用四個圓角圖形（或一個圓圖片）。兼容性：通殺所有瀏覽器。這是最常用的圓角框做法。因為采用圖片來表現(xiàn)，所以其圓角是超級平滑，無任何鋸齒現(xiàn)象。表現(xiàn)豐富，適用于各種對圖片表現(xiàn)要求較高的圓角框。缺點(diǎn)：構(gòu)造這個圓角也需要加入四個標(biāo)簽來裝四張角圖片，結(jié)構(gòu)也有冗余。重用性不強(qiáng)：如果一個頁面有多個圓角，并且要實(shí)現(xiàn)不同的半徑大小，則要重新制作一套圓角圖片。如果對結(jié)構(gòu)的冗余沒有特別的需求，這就是超級圓滑圓角框的解決方案了。實(shí)現(xiàn)原理：利用九宮格原理，在一個容器的四個角加入絕對定位（或相對定位）的四張圓角圖片。實(shí)例演示：http://www.cssplay.co.uk/boxes/three_cornered.html利用VML繪制圓角（ieonly）收錄理由：無圖片，平滑，可加陰影邊框圖四特點(diǎn)：不用任何圖形。兼容性：只能在IE中使用圓角半徑隨意調(diào)整重用性強(qiáng)：多個圓角任意調(diào)用。圓角顏色隨意設(shè)置。結(jié)構(gòu)無冗余。圓角平滑無鋸齒。缺點(diǎn)：除了兼容性有問題外，其它方面的表現(xiàn)都不錯不能在圓弧中表現(xiàn)豐富的有漸變的圖片，因為圓弧外框是透明的。實(shí)現(xiàn)原理：使用IE專用的VML來畫出圓角。<v:roundrectid=”roundbox”class=”circle”strokecolor=”red”strokeweight=”2px”arcsize=”0.08"></v:roundrect>注意加入引用空間：<htmlxmlns:vxmlns="/1999/xhtml">這是兼容的用法,xmlns:v一定不能少，否則。。。樣式表中加入這一句話：v”:*{behavior:url(#default#VML)display:inline-block;}Arcsize為半徑Strokeweight為邊框線寬度Strokecolor為邊框線的顏色實(shí)例演示：（請在IE系列瀏覽器下查看本實(shí)例）<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns:vxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>VML畫平滑圓角框</title><style>v\:*{behavior:url(#default#VML);display:inline-block;}body{background-color:#99FFFF;font-size:12px;}.circle{height:130px;width:300px;padding-top:8px;margin:0pxauto;z-index:2;margin-left:340px;}h1{border-bottom:2pxredsolid;font-size:12px;margin:4px;text-indent:1em;height:20px;}div{font-size:12px;padding:10px;}</style></head><body><v:roundrectid="roundbox"class="circle"strokecolor="red"strokeweight="2px"arcsize="0.08"><hl>VML畫平滑圓角</hl><divclass="tl">使用IE專用的VML來畫平滑圓角框，還可以畫出陰影效果。就其圖形表現(xiàn)來說，是非常完美的。</div><v:shadowon="t"color="#777"opacity="52428f"offset="1.5pt,1.5pt"/></v:roundrect></body></html>提示：你可以先修改部分代碼再運(yùn)行。5,利用私有屬性繪制圓角(FF3only)收錄理由：平滑無鋸齒圖五特點(diǎn)：不用任何圖形。兼容性：只能在FF3中使用，其它瀏覽器不受支持。圓角半徑隨意調(diào)整重用性強(qiáng)：多個圓角任意調(diào)用，只需要樣式表設(shè)置就可以。圓角顏色隨意設(shè)置。結(jié)構(gòu)無冗余。圓角平滑無鋸齒。缺點(diǎn)：除了兼容性有問題外，其它方面的表現(xiàn)都不錯，這種方式應(yīng)該是最完美的方式，可惜目前只有FF3能支持這個屬性，以后CSS3后會支持這個屬性，不過這不知道要等到多少年以后。同第五種圓角一樣，在處理圓弧內(nèi)的圖片背景時顯得有些有心無力。實(shí)現(xiàn)原理：使用FF3專用的私有屬性來畫出圓角。只用兩種屬性就能體現(xiàn)圓滑的圓角框-moz-border-radius:10px;/*圓角半徑*/Border:5pxredsolid;/*邊框大小*/實(shí)例演示：（請在FF3瀏覽器下觀看，其它瀏覽器不支持）<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>FF3下的圓角框</title><styletype="text/css">body{background:#CCCCCC;}.round{-moz-border-radius:20px;/*半徑*/border:4pxsolid#333;/*邊框?qū)挾?/margin:50pxauto;width:30%;height:150px;font-size:12px;}h1{border-bottom:4px#333solid;font-size:12px;width:100%;padding:5px0;text-indent:1em;}.context{font-size:12px;padding:10px;}</style></head><body><divclass="round"><hl>FF3私有屬性畫的圓角框</hl><divclass="context"><p>FF3下的圓角框兩個屬性就可以解決:</p><p>-moz-border-radius:半徑</p><p>border:邊框</p></div></div></body></html>提示:你可以先修改部分代碼再運(yùn)行。無圖片腳本圓角框（js半完美解決方案）這種方案目前應(yīng)該是比較完美的方案了。

圖六特點(diǎn)：不用任何圖形。兼容性：通殺所有瀏覽器圓角半徑隨意調(diào)整重用性強(qiáng)：多個圓角任意調(diào)用。顏色隨意設(shè)置，并且可以使用復(fù)雜的圖片做為背景，表現(xiàn)豐富6.結(jié)構(gòu)無冗余，只需要在容器上定義一個class或ID就可以將這個div變成圓角。圓角平滑。缺點(diǎn)：客戶端禁用JS時就無圓角，不過在目前情勢下，這種情況應(yīng)該不會成為太大的問題。實(shí)例演示：/examples.php（有三個演示例子）7,無圖片vml/canvas結(jié)合的圓角框增補(bǔ)一種方案，結(jié)合jquery/vml/canv

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論