CSS高級(jí)技巧之圓角矩形下

2020-03-24 17:49:58

字體：大中小

供稿：網(wǎng)友

Top-Left.gif 與 Bottom-Left.gif 都是大圖像, Top-Right.gif 和 Bottom-Right.gif 都是小圖像, 小圖像在大圖像上根據(jù)尺寸進(jìn)行自動(dòng)滑動(dòng)以適應(yīng)內(nèi)容. 該方法用到2組4個(gè)圖片: 1組Top圖片構(gòu)成頂部圓角, 1組Bottom圖片構(gòu)成底部圓角以及主體. 注意容器的最大高度和寬度不能超過(guò)圖片的最大高度和寬度. 圖片的結(jié)構(gòu)位置: html代碼大致如下: ＜div ＞＜div ＞＜div ＞＜h1＞標(biāo)題＜/h1＞＜p＞內(nèi)容＜/p＞＜/div＞＜/div＞＜/div＞ CSS代碼大致如下: .wrapper{width:20em;background:#ccc url(../images/bottom-left.gif) no-repeat left bottom;} .box-outer{background:url(../images/bottom-right.gif) no-repeat right bottom;} .box-inner{background:url(../images/top-left.gif) no-repeat left top;} .wrapper h1{padding:2%;background:url(../images/top-right.gif) no-repeat right top;} .wrapper p{padding:2%;} Tips: 該方法很好的解決了容器擴(kuò)展的問(wèn)題, 但是要注意容器的最大尺寸不要超過(guò)背景圖片所能構(gòu)成的最大尺寸; 該方法需要2組額外的沒(méi)有任何語(yǔ)義的標(biāo)簽, 在結(jié)構(gòu)上并不理想, 我們可以用JavaScript和DOM動(dòng)態(tài)添加額外元素來(lái)避免這個(gè)問(wèn)題, JavaScript不作討論滑動(dòng)門(mén)適用范圍很廣, 以至于隨處可見(jiàn). 4. 山頂角(MountainTop) Web大師Dan Cederholm的發(fā)明, 和他在Web Standard Solutions中的變色龍小圖標(biāo)有異曲同工之妙. 如果用 3.滑動(dòng)門(mén) 的技術(shù)創(chuàng)建多種顏色的圓角矩形, 那是不是要建立多組不同顏色的圖片呢? 那是不是會(huì)很麻煩呀? 幸運(yùn)的是Dan為我們帶來(lái)了山頂角. 他建立的不是多種顏色的圖片組, 而是一組圓角的蒙板. 用蒙板蓋住背景色, 生成圓角矩形, 這種逆向思維令人敬佩. 圓角蒙板基本的HTML代碼和CSS代碼與上例相同, 也需要4個(gè)不同的圓角蒙板. 代碼不做重復(fù). Tips: 可以使用.png來(lái)創(chuàng)建圓滑的透明蒙板, 但介于IE6和以下版本不支持png-24的透明效果, 需要用到Hacks, 所以不太推薦. 所以對(duì)于gif圖片的蒙板, 對(duì)于小弧度的圓角矩形效果較好, 大弧度的圓角矩形可能會(huì)出現(xiàn)鋸齒. 同樣的需要添加額外的非語(yǔ)義標(biāo)簽, 語(yǔ)義化狂熱者們可以用JavaScript來(lái)完成這個(gè)工作. 5. CSS Sprites 圓角 CSS Sprites并不是專(zhuān)門(mén)制作圓角矩形的, 但是它提供了一種制作圓角矩形的方案. 結(jié)構(gòu)構(gòu)成圖實(shí)際用到的圓角小圖只單單用background的position來(lái)指定圓角圖片背景定位, 但是會(huì)多出很多額外標(biāo)簽, 這里不做推薦本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：如何寫(xiě)出輕便、更快的CSS代碼

下一篇：有條件的添加CSS的hover樣式