|
序言：第一章中我介紹了最基本的純CSS圓角框的實現(xiàn)原理，并給出Demo，在本章中會對上一個模型作一些新的創(chuàng)新，實現(xiàn)將背景圖片透明圓角化。并給出一些漂亮的通用演示效果。
在上面的案例中，我只給出最為原始的圓角框模型，它還是存在一些不足之處。比如不能將圖片應(yīng)用到圓角框內(nèi)。而在本例中，我會在上面的基礎(chǔ)上作出一些創(chuàng)新。就是將背景圖片也圓角化，好像目前在網(wǎng)絡(luò)上還沒有這樣的功能應(yīng)用，我只見過用js方式來實現(xiàn)的，可以參看我的《超圓滑圓角框的半完美解決方案》一文中后面幾種JS方案。但是純CSS方式的實現(xiàn)可是我獨家所創(chuàng)，如有雷同，只能說英雄所見略同。呵呵！
還是先看看最終的效果圖，讓大家有一個大概的印象。
圖一
像這種小面積布局在網(wǎng)頁設(shè)計中應(yīng)用得很普遍，但目前網(wǎng)絡(luò)流行的作法都是采用圖片的方式來實現(xiàn)的，將圖片按上中下切成三塊內(nèi)容，然后使用三個同級的DIV或SPAN容器各自填充一張圖，但是這種方法有一個最大的毛病：不能自動適應(yīng)寬度的變化，一般做法都是采用固定寬度的方式，這是由于圖片的寬度決定的。
當然對于一些比較有經(jīng)驗的人員來說，可以采用九宮格布局（可參看我的另一篇文章《九宮格基本布局》）方式或者滑動門方式來做到自適應(yīng)寬度的變化，九宮格一般都需要用到八張圖片，而滑動門雖然只用一張圖片，但為了適應(yīng)寬度的變化，這張圖片一般都做得很大。
而我現(xiàn)在獨創(chuàng)的這種方法可以完全做到適應(yīng)不同寬度的需要，并且全部兼容所有的瀏覽器，而所需要的僅僅是一張很小的水平平輔的背景圖片而已。
出處：藍色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 CSS圓角——透明圓角化背景圖片 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 CSS圓角——透明圓角化背景圖片 [1]
第 2 頁 
