border基礎(chǔ)回顧
border 顧名思義就是邊框的意思，在 CSS 中，你可以透過 border 的語法來對(duì)邊框做許多樣化的設(shè)計(jì)變化，例如設(shè)定邊框的寬度、樣式、顏色等等，也可以隱藏邊框，原則上 CSS 對(duì)于 border 的設(shè)計(jì)不只局限于 DIV 區(qū)塊或 span 的邊框，也可以應(yīng)用到其他的網(wǎng)頁元素的邊框上，例如網(wǎng)頁標(biāo)題的邊框、圖片的邊框（img border）... 等，所有的主流瀏覽器都支援 CSS border 屬性。
CSS border 語法介紹：

標(biāo)準(zhǔn)的 css border 規(guī)則由左至右共有三個(gè)參數(shù)，每個(gè)參數(shù)間用半形空格隔開，第一個(gè)參數(shù)為邊框的粗細(xì)（border-width），一般使用 px、em 等標(biāo)準(zhǔn)網(wǎng)頁單位，第二個(gè)參數(shù)標(biāo)示邊框的顏色（border-color），可以使用色標(biāo)準(zhǔn)色碼或顏色的英文名稱，第三個(gè)參數(shù)是邊框樣式（border-style），可以設(shè)定實(shí)線、虛線、雙實(shí)線、連續(xù)點(diǎn) ... 等許多不同的風(fēng)格。
簡(jiǎn)單回顧以后，我們下面來進(jìn)入正題：

一、border邊框變形記
前端開發(fā)者對(duì)于如何用純css如何實(shí)現(xiàn)三角效果應(yīng)該有一定了解了。但是大家真正在項(xiàng)目中用到這個(gè)效果并不是很多吧，而且并不是每個(gè)人都熟諳此純css打造三角形的原理。所以今天粗?jǐn)M一文，寫給一些對(duì)此原理不是很精通的朋友。高手飄過吧！下面來看我是如何通過純css來實(shí)現(xiàn)三角形的效果的。

我們首先來看上面一組圖形，分別是兩個(gè)正方形，兩個(gè)長(zhǎng)方形，并且每個(gè)形狀中都包括不同的圖形。值得一提的是這些形狀是通過純css來實(shí)現(xiàn)的，比較可喜的是它們兼容ie6…
等邊四邊形==圖形的合體（不許有邪惡的想法?。。?br />如果你要問這些是如何實(shí)現(xiàn)的呢？其實(shí)比較簡(jiǎn)單，只是平時(shí)大家很少關(guān)注罷了。我們習(xí)慣了用border定義邊框，因?yàn)樵O(shè)計(jì)圖的原因，大多是定義“1-5”像素的圖形，并沒有進(jìn)行過深入的研究，比如border-left與border-top之間的銜接是怎樣的呢？想要知道答案很簡(jiǎn)單，我們只需要將border-width的值增大就可以了，增大后我們會(huì)看到border之間的銜接是一條斜線。如上圖所示了，下面貼上面部分的代碼：

你一定很想了解上面的圖形的變形原理了。這里我分步驟解析代碼：
首先我們研究圖一的代碼，發(fā)現(xiàn)就是我們平常使用的定義邊框的方式：border:40px solid #0f0;這樣我們就可以得到一個(gè)寬高均為20像素，邊框?yàn)?0像素的正方形；
繼續(xù)，研究圖二的代碼，也是很簡(jiǎn)單實(shí)現(xiàn)，只不過給各個(gè)邊框添加了顏色罷了，不過我們卻發(fā)現(xiàn)了驚人的變化，每個(gè)邊框與邊框之間竟然是產(chǎn)生了斜線，并且這個(gè)時(shí)候產(chǎn)生了4個(gè)梯形，聰明的你一定會(huì)有一種原來如此的感覺，并且同時(shí)聯(lián)想到如果沒有中間的空白那樣不就產(chǎn)生了三角形了嗎…
是的，如你所想，圖三就是你腦子中的東西，我們看到代碼“width: 0px; height: 0px;”這樣空白部分就沒有了，不過這時(shí)你可能還需要注意一個(gè)細(xì)節(jié)（加粗顯示的部分），“font-size: 0”，是的就是這里，為了兼容ie6，去除ie610像素高度的bug(必要的時(shí)候需要用到line-height:0;)。至此，我們?cè)俑嬉欢温?，接下來你是不是想要告訴我，將其他的三個(gè)邊框顏色轉(zhuǎn)化成背景色就變成了一個(gè)三角形呢？是的，的確是這個(gè)樣子。但是不要著急，我們接下來研究下圖四。
同圖三只有細(xì)微的不同，右邊邊框的寬度增加了，變成了80像素，然后你看到了產(chǎn)生了4個(gè)非直角的三角形，但是這個(gè)又有神馬用呢？我可以肯定的說，只要用心思考，這個(gè)還是比較好玩的，因?yàn)槲覀內(nèi)切蔚念I(lǐng)域已經(jīng)不再局限于直角的了…呵呵，各位看官請(qǐng)繼續(xù)給下看
正方形變形成三角形：

我盡力不拖泥帶水完成整個(gè)變形過程的注解，但是文筆以及性格的原因，總有磨嘰之處，還請(qǐng)見諒！貼上面圖形代碼：

即使不看上面代碼，你也應(yīng)該清楚上面幾個(gè)圖形是如何得到的了。沒錯(cuò)，定義了一個(gè)“border:40px solid #fff /*這里就是背景色*/;”，然后給邊框定義不同的顏色值就行了，如果想要顯示下面的三角形，只給下面的圖形定義顏色即可。
就這么簡(jiǎn)單了，我們常見的某些小三角就是通過這樣的代碼來實(shí)現(xiàn)的，一般配合著絕對(duì)定位（position:absolute;）來使用，就會(huì)達(dá)到理想的效果了。

二、border變形記之高級(jí)進(jìn)階
神馬，上面還不算結(jié)束。呵呵，的確如此，我想說的是通過上面的部分恐怕還不能實(shí)現(xiàn)開頭圖片中的效果。所以我們只能繼續(xù)加深研究層次了…下面是內(nèi)涵圖出場(chǎng)了。。。

做為一名睿智的前端開發(fā)人員來說，你一定不會(huì)對(duì)于上面的做法感到不屑，因?yàn)槲抑v的不僅僅是技術(shù)，這還是一項(xiàng)藝術(shù)。嘿嘿，痞子出場(chǎng)，講解繼續(xù)…首先放碼…

我感覺做前端的人玩神馬找找看，找不同之類的游戲肯定牛X，畢竟整天面對(duì)著代碼調(diào)bug，分析不同類型的代碼在不同的瀏覽器實(shí)現(xiàn)的不同效果…呵呵，啰嗦了。你應(yīng)該看到不一樣的地方了。
上面想要實(shí)現(xiàn)的效果就是，左邊的塊要壓在右邊的塊上面，來實(shí)現(xiàn)整體的塊元素之間的銜接工作。看到這里，我知道您在思考什么，z-index是不是？難道不是，你也想到透明了？那么說明你已經(jīng)領(lǐng)悟到css三角形的真諦了。

三、border變形記之分步導(dǎo)航效果（火箭組裝法）
電視中大家都看到過火箭，以及類火箭形物體。今天我這里講的技術(shù)就是火箭組裝是非常不可能的，我要講的是類似火箭的組裝來實(shí)現(xiàn)純css分布導(dǎo)航效果。
大家都知道火箭由最下面的發(fā)動(dòng)機(jī)+推進(jìn)器，中間燃料箱發(fā)送機(jī)，頭上是衛(wèi)星整流罩等等…大概這么個(gè)情況。ok，看我下面的結(jié)構(gòu)

看到了上面的圖解之后你肯定應(yīng)該知道自己該干神馬了，我們只需要給中間的塊一個(gè)固定的值，然后左右兩邊的形狀采用相對(duì)于中間的塊絕對(duì)定位就可以了。既然知道了原理，那么就開始行動(dòng)吧。

如果看到這里你仍舊在問怎么實(shí)現(xiàn)神馬的巴拉巴拉…那么我只能告訴你：跪求的話我也不告訴你。你只有自己去實(shí)踐，并且掌握的知識(shí)才能是自己的，所以自己去參照上面代碼寫一個(gè)效果，你絕對(duì)不虛此覽。

四、border變形記之變態(tài)版
每個(gè)技術(shù)人員都在追求是技術(shù)的更高層次，更深層次。所以當(dāng)你以為某個(gè)技術(shù)點(diǎn)已經(jīng)結(jié)束了的時(shí)候，或許之前你所領(lǐng)悟到的僅僅是個(gè)開始。關(guān)鍵在于你是否能夠利用你掌握的知識(shí)去探索并創(chuàng)造。下面一個(gè)簡(jiǎn)單的border變形記的變態(tài)版，技術(shù)內(nèi)容很低級(jí)，想法還是可以的。歡迎重口味！

最新評(píng)論