一、前言

利用CSS的border屬性可以生成一些圖形，例如三角或是圓角。純粹的CSS2的內(nèi)容，沒有兼容性的問題，我之前在純CSS實現(xiàn)各類氣球泡泡對話框效果一文中算是比較詳細的講述了CSS border屬性生成三角的原理，以及實例。我覺得此技術(shù)相當實用的，故本文再次簡單敘述一下，另外，本文還將展示可能并不為眾人所知的CSS border圓角生成技術(shù)。好了，裹腳布的話就不說了，直接進入正題。

二、CSS border生成三角技術(shù)簡介

效果搶鮮
下圖為使用CSS的border屬性實現(xiàn)的三角效果：

如何實現(xiàn)的，為何會有這樣的效果，不急，take it easy!

梯形圖案
看下面這段樣式：

當某個div應(yīng)用了上面這個樣式后，結(jié)果會如何？見下圖（截自Firefox3.5，IE瀏覽器有細節(jié)上的差異）：

更進一步 – 部分邊框透明
現(xiàn)在，設(shè)想一下，如果我們現(xiàn)在只保留一個一個上邊框，其余邊框均transparent透明（或與背景色同色），那么是不是就只顯示一個上面紅色的邊框了，我們測試下，與上面類似的代碼，只是修改下其余三個邊框的顏色。

結(jié)果如下圖（截自Firefox3.5）：

從梯形到三角
上面的是梯形，我要想得到一個三角圖案該怎么辦呢？顯然，很簡單，把div的高寬都變成0，只留一邊，不就是三角了嗎？如下代碼：

結(jié)果如下（依舊截圖自Firefox3.5）：

從等腰直角三角形到普通等腰三角
上圖為等腰直角三角形，之所以為等腰直角，是因為所有的邊框?qū)挾仁且粯拥?，如果我們將邊框?qū)挾仍O(shè)置為不同，那會怎樣？則會形成等腰三角形。如下代碼：

得到的結(jié)果如下圖：

從等腰到不等腰
我們可以不局限于保留一條邊框，我們可以保留兩條，于是我們可以告別等腰，得到更加銳利的三角，正如一開始所展示的那個三角：

實際的應(yīng)用
關(guān)于應(yīng)用，不多說，直接看圖：

說明：
以上的測試代碼純粹為了說明原理，所以使用#ffffff白色邊框，通過于背景融合來隱藏邊框。在實際的操作中，應(yīng)該使用transparent透明屬性，例如border-color:#ff3300 #ff3300 transparent transparent;，這同樣會有問題，IE6瀏覽器不支持transparent透明屬性，不過沒有關(guān)系，就border生成三角技術(shù)而言，直接設(shè)置對應(yīng)的透明邊框的border-style屬性為dotted或是dashed即可解決這一問題，為什么使用dotted和dashed可以修復(fù)此問題呢？您有興趣可以參見默塵的這篇文章Dotted&Dashed終極分析及IE6透明邊框。

三、CSS border圓角生成技術(shù)簡介

我看圓角
一提到圓角，我腦中閃過的詞就是“定位”，“嵌套”，“模擬”，“漸進增強”，“濫用”。定位，也就是切四個角上下左右定位，這是淘寶首頁的做法，但是面對IE6的奇偶bug只能當作看客；使用“嵌套”則不會有此問題，“嵌套”分圖片背景嵌套和CSS邊框嵌套，使用圖片嵌套則圖片的重用性，大小優(yōu)化有待加強，邊框嵌套則技術(shù)實現(xiàn)上有些難度；或使用“漸進增強”，CSS3 border-radius屬性，而不要去鳥IE這類自我感覺良好的瀏覽器；或是學習Google使用CSS模擬，而一般的CSS模擬都是使用左右邊框+背景色的方式1像素1像素的拼合成的。這類方法各有優(yōu)缺點，需根據(jù)實際情況采用。對于滿眼圓角的設(shè)計圖我是很不喜歡的，該用則用，切勿為了圓角而圓角。

border圓角圖案生成法
這里介紹的實現(xiàn)圓角的得到與上面提到的都是不一樣的，雖然也屬于CSS模擬的范疇，但是其高效的程度確實相當驚人的，可謂最佳實踐之一。

我們先看看效果，見下圖，截自Firefox3.6：

上述效果的實現(xiàn)僅僅使用了三個標簽，如下代碼：

我們看看這段代碼在IE6下的效果：

這里的高效在于，僅僅使用了一層標簽就模擬了3像素的圓角，按照曾經(jīng)我對CSS圓角模擬的理解，模擬1像素的圓角需要一層標簽(background+borderLeft+borderRight)，兩像素的需要兩層標簽，三像素的需要三層標簽。

有點神奇，但是就像看劉謙的魔術(shù)一樣，說穿了也就那么回事，其實這里的圓角模擬在本文的上面已經(jīng)展示了，就是這樣圖片：

您可能會疑問，是不是搞錯圖片啦，這顯然不是一個模樣的，非也非也，就本質(zhì)上而言，圓角的實現(xiàn)與上面的梯形圖就是同樣的東西?，F(xiàn)在，盯著上面這張圖，我們想象一下，用力的想象——上面的梯形寬度越來越寬（不是拉伸），一直寬到500像素，是不是與上面實現(xiàn)的圓角的下邊緣一致啊？

也就是說，那個含有“我是一只小小鳥……”文字的圓角圖形是有一個上梯形+矩形+下梯形組成的。參見下面的分離效果圖：

CSS border圓角生成demo

局限性
人無完人，金無足赤，此方法雖然簡潔高效，兼容性上佳，但是依然有局限性，在實現(xiàn)實色背景的圓角效果時，此方法可謂首選；如果是純粹的圓角邊框，此方法也可以實現(xiàn)，需要用到邊框重疊，但是標簽數(shù)幾乎要翻倍，其權(quán)衡效用將大打折扣，反不如其他圓角方法來的實在。

四、結(jié)語

如果在web制作中，需要用的一些直接可以使用CSS+單標簽?zāi)M的圖片，我的建議是“毫不猶豫使用CSS模擬”，例如實色的三角，或是實現(xiàn)實色的圓角效果，這可以說是最高效，最利于擴展維護的前端實現(xiàn)方法了。我們需要開闊的思維，而不要僅僅局限于眼前的技術(shù)，武俠中所謂的“無招勝有招”還是有著一定的哲學道理的，長遠來看，意識與海納百川的心態(tài)比當下的一點技術(shù)更來得重要。我還羽翼未豐，青澀稚嫩，誠惶誠恐不敢隨性多說。不管怎樣，希望本文的內(nèi)容能夠?qū)δ膶W習有所幫助，如果您發(fā)現(xiàn)文章中有表述不準確之處，歡迎指正。

最新評論