原創(chuàng)：冰極峰 轉(zhuǎn)載請注明出處 時間：2009年7月19日 23:33:05

冰極峰教程系列之一：九宮格基本布局

冰極峰教程系列之二：牢不可破的九宮格布局

冰極峰教程系列之三：三層分離的完美九宮格

冰極峰教程系列之四：九宮格應(yīng)用案例--極酷網(wǎng)頁播放器設(shè)計

冰極峰教程系列之五：無hack并支持透明圓角框的全兼容九宮格布局

前言：在前面四篇文章中，我介紹了九宮格的原理及一個應(yīng)用案例，本來已經(jīng)告一段落了，但是那個布局還是有一定的局限性的。其最大的局限是不能應(yīng)用四角圓角外面是透明的圖片，而作為一個界面布局方式，如果不能應(yīng)用透明的外圓角，那么這種布局的可擴展性就會大受影響，不能最大化限度地得以推廣。本文就是要從根本上解決這個問題。

我知道這個問題的根源在于：中間的左右邊框列垂直同高產(chǎn)生的，因為它們的父級容器是box這個總?cè)萜?，而不是一個獨立的容器，而底部的左右兩個角容器是向上負偏移到它們的上面的，遮擋住了背景色。所以當圓角容器中的圖片采用半透明或透明的圖片時，其透明部分就會顯示出左右兩側(cè)邊框的圖片背景出來。

在制作前面的《牢不可破的九宮格布局》的模型時，我就已經(jīng)發(fā)現(xiàn)了這個問題，當時制作圓角圖片也是采用的透明的圓角圖片，可是后來發(fā)現(xiàn)這個問題后，為了減少麻煩，我又將透明的圓角片的透明部分加上一個和總?cè)萜飨嗤谋尘吧?，來避免了這個問題。但這個方法最終不是解決的終極辦法，在我們的日常工作中，采用半透明的圓角來定制界面是很有必要的，因此在那篇文章中僅僅只是逃避了問題，而沒有從根本上解決問題。在文章發(fā)布之后，終于有細心的朋友在試用之后，提出這個問題，哈哈，看看終于是無法偷懶來回避這個問題了。

知道了問題的根源后，要解決它也是一件簡單的事情。

因為我這篇文章是建立在《牢不可破的九宮格布局》這篇文章的基礎(chǔ)上的，如果還沒有看過那篇文章的朋友，不妨先看了它后再來看這篇文章。這將有助于你的消化！

看來，要解決這個問題，我需要將中間部分作一些結(jié)構(gòu)上的修改。因為我希望它的左右邊框容器是和內(nèi)容區(qū)是垂直同高的，也就是當內(nèi)容區(qū)的文字內(nèi)容的高度發(fā)生變化時，其左右邊框的高度跟著同步調(diào)整其高度。這就是一個典型的三列同高布局。但與平時看到的三列布局有點不同的是，我希望中間的內(nèi)容區(qū)的寬度填滿整個中間的寬度，但它不是100%的寬度，而是100%減去左右兩列邊框的寬度，而這個寬度并不是一個百分比，它們都是有固定像素值的。這需要運用到我在上一篇文章中提到的方法來進行的解決。

為此我需要改變一下原來的結(jié)構(gòu)：

【結(jié)構(gòu)層】

我給中間的左中右三個容器增加一個父級容器，并給它定義一個類名middle，那么，現(xiàn)在的中間區(qū)域的結(jié)構(gòu)應(yīng)該是這樣的：

【樣式層】

我們再定義一下middle的樣式，我們將原來的box的overflow:hidden;取消，將它加在middle容器上，讓超出的部分截出隱藏。

這時需要特別指出的是，如果只是將middle這個容器設(shè)置為overflow:hidden的話，那么這個模型可以在IE6以上的所有瀏覽器中通過，但對于IE6來說，問題依然存在（你可以將此句刪除，然后在IE6測試看看。）。最后加上zoom:1才能完美地解決這個問題。

基礎(chǔ)模型的效果圖如下：

此基礎(chǔ)案例也包括在下面的下載壓縮包中。你可以下載到本機進行測試。

【案例應(yīng)用】

為了更直觀地測試透明圓角框效果，我在body中加了一張上下漸變的水平平鋪的背景圖片，并且出于簡化模型的需要，我將圓角框的圖片的外圓角改成了透明的gif圖片（PS：你也可以將它換成png-24半透明的圓角圖片，當然就要注意IE6的兼容性問題，需要JS代碼來支持。支持代碼在下面的播放器的案例中已經(jīng)應(yīng)用了，你略加修改就可以使用。）。你可以參照下面的實例來設(shè)計圖片，在應(yīng)用你自己的設(shè)計前，你需要修改樣式表中圖片的寬高值。

案例模型的效果截圖如下所示：

在上面的效果圖中，可以看到在一個漸變背景下，其圓角框是透明的。你也以點擊下面的“寬屏”、“全屏”按鈕來測試當窗口放大時其透明圓角圖片的完美應(yīng)用。

本模型在以下瀏覽器中完美通過：

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

點擊這兒下載完整的壓縮包：Demo

• 兼容
• 透明
• 布局
• 圓角