|
【樣式層】
我們再定義一下middle的樣式，我們將原來的box的overflow:hidden;取消，將它加在middle容器上，讓超出的部分截出隱藏。
.box{width:50%;margin:50px auto 0;background:#fff; }
.middle{overflow:hidden; zoom:1; }
這時需要特別指出的是，如果只是將middle這個容器設(shè)置為overflow:hidden的話，那么這個模型可以在IE6以上的所有瀏覽器中通過，但對于IE6來說，問題依然存在（你可以將此句刪除，然后在IE6測試看看。）。最后加上zoom:1才能完美地解決這個問題。
基礎(chǔ)模型的效果圖如下：
圖一
此基礎(chǔ)案例也包括在下面的下載壓縮包中。你可以下載到本機進行測試。
【案例應(yīng)用】
為了更直觀地測試透明圓角框效果，我在body中加了一張上下漸變的水平平鋪的背景圖片，并且出于簡化模型的需要，我將圓角框的圖片的外圓角改成了透明的gif圖片（PS：你也可以將它換成png-24半透明的圓角圖片，當(dāng)然就要注意IE6的兼容性問題，需要JS代碼來支持。支持代碼在下面的播放器的案例中已經(jīng)應(yīng)用了，你略加修改就可以使用。）。你可以參照下面的實例來設(shè)計圖片，在應(yīng)用你自己的設(shè)計前，你需要修改樣式表中圖片的寬高值。
案例模型的效果截圖如下所示：
圖二
在上面的效果圖中，可以看到在一個漸變背景下，其圓角框是透明的。你也以點擊下面的“寬屏”、“全屏”按鈕來測試當(dāng)窗口放大時其透明圓角圖片的完美應(yīng)用。
本模型在以下瀏覽器中完美通過：
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
點擊這兒下載完整的壓縮包：Demo
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2940000-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2009/6881.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 無hack并支持透明圓角框九宮格 [1] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 無hack并支持透明圓角框九宮格 [2]
