實現相容性的CSS粗虛線邊框(dashed)效果

文章目錄

• 一、dashed粗虛框的不相容問題
• 二、使用CSS3實現相容性的border虛框效果
• 三、執行個體代碼與最終效果展示
• 四、一點點的改進
• 五、結語

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=822

一、dashed粗虛框的不相容問題

CSS border-style屬性中，有一個非常常用的屬性，就是dashed，用來形成虛框。平時我們使用的寬度多半是1像素，所以其中的差異不細究，也不 易覺察。但是，如果邊框的寬度(border-width)大於1像素，那麼不同瀏覽器下的表現差異就比較明顯了。我們可以舉一個非常簡單的例子，參見下 面的測試代碼：

.border_dashed{
    width:260px;
    height:180px;
    border:2px dashed red;
    background:yellow;
}

結果在各個瀏覽器下的表現如下：

可以看到，IE瀏覽器下，對於2像素的虛框是採用的4-2-4-2的形式重複下去的，且轉角等寬相連；Firefox和Chrome瀏覽器都是 6-6-6-6的形式重複虛邊框的，虛框起點的處理上，Firefox似乎是從實框頂端開始平鋪，而Chrome則似乎不是；最後是Opera瀏覽器，雖 然Opera瀏覽器與IE一樣是實線:空白 = 2:1的形式平鋪的，但是Opera瀏覽器的平鋪寬度卻比IE要大，與Chrome等相同，為6-3-6-3。基本上每種瀏覽器都有差異。

您可以狠狠地點擊這裡：2px dashed虛框的表現

在這種情況下，我們要實現相容性的虛框效果，怎麼辦呢？在過去，我們可以只能找個模子切個整個邊框圖了，但是現在，隨著瀏覽器的發展，我們有了更加上乘的擴充性強的相容性方法。

本文作者：張鑫旭，來自張鑫旭-鑫空間-鑫生活(http://www.zhangxinxu.com/wordpress/)本文地址：http://www.zhangxinxu.com/wordpress/?p=822 訪問原出處，更多你未見過的前端技術。二、使用CSS3實現相容性的border虛框效果

CSS3的潛力是巨大的，而且有時候可以成為我們解決相容性問題的利器。CSS3中有一個非常非常強大的屬性，就是border-image。

關於CSS3 border-image的基本屬性，您可以參見這裡 – CSS3 border-iamge使用參考指南，如果您想深入理解border-image的使用，原理以及執行個體，建議您狠狠地點擊我的“CSS3 border-image詳解、應用及jQuery外掛程式”這篇文章。
本文就不對border-image作過多的講解了。

1. 分析與簡述
首先，我們是以讓各個瀏覽器下的邊框變現都與IE近乎一致為前提的。IE瀏覽器下的虛框緊密踏實，作為剪裁線可謂上佳選擇，所以，以下所述內容均是以實現IE瀏覽器下（4像素-2像素-4像素-2像素）的虛線框效果為目標的。

目前而言，從Firefox3.6，Chrome2，Safari4，到Opera10都支援強大的border-image屬性，所以，我們完全 可以使用border-image屬性實作類別似於IE瀏覽器下的虛線框效果。說起border-image，就是使用圖片實現邊框效果。換句話說，在本實 例中，在Firefox3.6，Chrome2，Safari4，Opera10瀏覽器下，我們要使用圖片類比IE下的虛線邊框效果。下面，就開始簡單介 紹如何?的。

2. 關於border-image的連結圖片
其實CSS相關的代碼很簡單，關鍵是圖片的製作，要想做出可以類比出虛框效果的背景圖片，不對border-image屬性有著深入的瞭解，那是根本不可能的。所以，如果您是好學之人，非常建議您看看我寫的這篇CSS3 border-image詳解、應用及jQuery外掛程式。

border-image所連結的image圖片大小很小，尺寸為18像素*18像素，為了便於您看清，我特意截了一張在photoshop cs4中放大的圖片，如下：

其中，我已經用輔助線划出了九宮格模型，我剛又看了下，其實並不是最佳的邊框圖。看似沒有什麼規律，其實很簡單，九宮格的四個邊角是固定 的，不參與平鋪展開等，四角以外的部分，就是repeat部分了。這裡就不具體展開了，還是那句話，上面提到的文章中我已經做了非常詳細的講解（還有互動 的Flash動畫示範）。

現在我們來看看響應的代碼，以及實現的效果。

本文作者：張鑫旭，來自張鑫旭-鑫空間-鑫生活(http://www.zhangxinxu.com/wordpress/)本文地址：http://www.zhangxinxu.com/wordpress/?p=822 訪問原出處，更多你未見過的前端技術。三、執行個體代碼與最終效果展示

我就不多說廢話了，直接上執行個體代碼，如下：

.border_dashed{
    width:260px;
    height:180px;
    border-width:6px;
/*IE*/
    border:2px dashed red\9;
/*Firefox*/
    -moz-border-image:url(http://www.zhangxinxu.com/study/image/dashed_red.png) 6 repeat;
/*Chrome & Safari*/
    -webkit-border-image:url(http://www.zhangxinxu.com/study/image/dashed_red.png) 6 repeat;
/*Opera*/
    border-image:url(http://www.zhangxinxu.com/study/image/dashed_red.png) 6 repeat;
    background:yellow;
}

對應的HTML代碼就是一個div而已，如下：

<div class="border_dashed"></div>

則結果如所示：

其他瀏覽器，如Chrome，Opera效果類似，就不一一了。

您可以狠狠地點擊這裡：border-image實現的相容性虛框效果

本文作者：張鑫旭，來自張鑫旭-鑫空間-鑫生活(http://www.zhangxinxu.com/wordpress/)本文地址：http://www.zhangxinxu.com/wordpress/?p=822 訪問原出處，更多你未見過的前端技術。四、一點點的改進

我上面提到過，原border-image的連結圖片可以有改進的地方，改進之處在於轉角的處理，IE瀏覽器下的border轉角是等寬分配的，所以，我們可以對http://www.zhangxinxu.com/study/image/dashed_red.png這張圖片做進一步的完善，完善後的結果如，放大16倍後的顯示：

這張圖片儲存後的地址是：http://www.zhangxinxu.com/study/image/dashed_red2.png

現在我們使用這張對邊角進行處理的圖片類比IE下的邊框效果，結果如下：

您可以狠狠地點擊這裡：處理後的border表現

本文作者：張鑫旭，來自張鑫旭-鑫空間-鑫生活(http://www.zhangxinxu.com/wordpress/)本文地址：http://www.zhangxinxu.com/wordpress/?p=822 訪問原出處，更多你未見過的前端技術。五、結語

這裡圖片的大小為18像素*18像素是必然的，因為一個平鋪的最小單元式4像素+2像素=6像素，配合border-image的九宮格模型，最小寬高就是6像素*3=18像素。

由於平鋪的最小單位是6像素，所以，如果元素的寬度或是高度不是6的倍數，是不會有完美的無縫平鋪的。最後一點，要設定邊框的寬度為最小平鋪單元（例如這裡的6像素）大小，否則border-image圖片會被展開或是壓縮。

就這些，時間倉促，難免有錯誤之處，歡迎指正。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=822

（本篇完）