CSS圓角——透明圓角化背景圖片

2020-03-24 18:29:59

字體：大中小

來源：轉載

供稿：網友

序言：第一章中我介紹了最基本的純CSS圓角框的實現原理，并給出Demo，在本章中會對上一個模型作一些新的創新，實現將背景圖片透明圓角化。并給出一些漂亮的通用演示效果。在上面的案例中，我只給出最為原始的圓角框模型，它還是存在一些不足之處。比如不能將圖片應用到圓角框內。而在本例中，我會在上面的基礎上作出一些創新。就是將背景圖片也圓角化，好像目前在網絡上還沒有這樣的功能應用，我只見過用js方式來實現的，可以參看我的《超圓滑圓角框的半完美解決方案》一文中后面幾種JS方案。但是純CSS方式的實現可是我獨家所創，如有雷同，只能說英雄所見略同。呵呵！還是先看看最終的效果圖，讓大家有一個大概的印象。圖一像這種小面積布局在網頁設計中應用得很普遍，但目前網絡流行的作法都是采用圖片的方式來實現的，將圖片按上中下切成三塊內容，然后使用三個同級的DIV或SPAN容器各自填充一張圖，但是這種方法有一個最大的毛病：不能自動適應寬度的變化，一般做法都是采用固定寬度的方式，這是由于圖片的寬度決定的。當然對于一些比較有經驗的人員來說，可以采用九宮格布局（可參看我的另一篇文章《九宮格基本布局》）方式或者滑動門方式來做到自適應寬度的變化，九宮格一般都需要用到八張圖片，而滑動門雖然只用一張圖片，但為了適應寬度的變化，這張圖片一般都做得很大。
而我現在獨創的這種方法可以完全做到適應不同寬度的需要，并且全部兼容所有的瀏覽器，而所需要的僅僅是一張很小的水平平輔的背景圖片而已。廢話少說，言歸正傳。基本原理：我們都知道圖片是方方正正的，不可能做出圓角效果，那么我們如何來做外圓透明的圖片呢？其實道理說明了也就是一件很簡單的事情，你看過下面的放大示意圖后可能就會“哦”地一聲，原來不過如此……圖二是的，看到這個效果圖你會一目了然，可是要想到這個方法，我卻浪費了不少腦細胞。呵呵！實現這種方法原理很簡單：在每個b標簽中各加載一次同樣的圖片，并結合背景定位background-position方式來達到效果。我們知道，同一張圖片加載多少次對于性能的影響并不大，因為這張圖片已經被電腦緩存到本地，和用css sprites合并圖片一樣的道理。但是需要注意的是：每個B標簽加載圖片的定位是不一樣的。背景圖片定位原理： b1標簽位于第一位，它主要用來描繪上邊框線，所以它不需要加載背景圖片。b2標簽位于第二位，它是第一個需要加載背景圖片的，但是不需要圖片負偏移，所以直接居左居頂定位就可以了。.b2{background-position:left top;}b3標簽位于第三位，它需要加載背景圖片，讓它的背景圖片向上負偏移b2的高度值就可以，也就是1px。.b3{background-position:left -1px;}b4位于第四位，所以它向上負偏移b2+b3高度值的和，為2px.。.b4{background-position:left -2px;}H3標簽位于第五位，所以它的背景圖片需要向上負偏移b2+b3+b4高度值的各，也就是4px；h3{background-position:left -4px;}這樣，b2、b3、b4、h3的圖片疊加起來和原始圖片上下漸變的效果完全重合，如同一張圖片，這樣就達到模擬圓角圖片的效果。
怎么樣，原理夠簡單明了吧！原理清楚后，要實現起來也就是一件水到渠成的事！HTML結構層：如同我們在第一章中模型所見，保持結構不變。html' target='_blank'>CSS樣式層：（只寫關鍵代碼）將上面的幾句代碼進行合并，如下所示：.sharp b.b2{background-position:left top;}
.sharp b.b3{background-position:left -1px;}
.sharp b.b4{background-position:left -2px;}
.sharp .content h3{background-position:left -4px;}和第一章中同樣的道理，我們肯定要在各個不同的塊框中有不同的背景圖片的變化，也就是說，我們也要實現不同的換膚方案，當一個頁面要多次調用同一個圓角框時，也可以讓它們有些豐富的變化。實現不同的風格。OK，沒問題，你只需要簡單的將下面的樣式中的背景圖片的路徑改變一下就可以了。.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}你可以實現不同的顏色方案，就看你的設計師給你多少張不同圖片了。一種風格的定制也是一件簡單的事情：*顏色方案一,綠色風格----------------------------------------*/
/*邊框色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#A0C044;}
.color1 .b1,.color1 .b8{background:#A0C044;}
.color1 h3{border-bottom:1px #679800 solid;}
/*圖片路徑*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}
/*文字內容背景色*/
.color1 .b5,.color1 .b6,.color1 .b7{background:#FFF;}你只需要復制上面的代碼，簡單修改一下邊框色，背景色，圖片路徑就變成你想要的風格了，是不是很簡單呢？然后在你想應用樣式的容器上定義這個color1類名即可。在我的演示模型中，我定義了9種風格的變化，看看有沒有適合你需要，直接復制就可以使用了，祝您用得開心！為了演示效果，本模型的寬度值全部采用百分比實現的，你可以隨意伸縮寬度，看看它能否適應彈性的變化。本模型在以下瀏覽器中完美通過：
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。點擊這兒下載完整的壓縮包2.rarhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS3 Transform、Transition和Animation屬性總結

下一篇：你必須了解的html、css和js注釋規范用法