一、前言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我們先看看效果，見(jiàn)下圖，截自Firefox3.6：

上述效果的實(shí)現(xiàn)僅僅使用了三個(gè)標(biāo)簽，如下代碼：

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

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

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

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

也就是說(shuō)，那個(gè)含有“我是一只小小鳥(niǎo)……”文字的圓角圖形是有一個(gè)上梯形+矩形+下梯形組成的。參見(jiàn)下面的分離效果圖：

CSS border圓角生成demo

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

四、結(jié)語(yǔ)

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

最新評(píng)論