原理

css 盒模型

一個盒子包括：margin+border+padding+content

上下左右邊框交界處出呈現平滑的斜線。 利用這個特點， 通過設置不同的上下左右邊框寬度或者顏色可以得到小三角， 小梯形等。

調整寬度大小可以調節三角形形狀。

示例 1

一般情況下， 我們設置盒子的寬高度， 及上下左右邊框， 會呈現如下圖：

#test2 {
 height: 0;
 width: 0;
 overflow: hidden; /* 這里設置overflow， font-size， line-height */
 font-size: 0; /*是因為， 雖然寬高度為0， 但在IE6下會具有默認的 */
 line-height: 0; /* 字體大小和行高， 導致盒子呈現被撐開的長矩形 */
 border-color: #FF9600 #3366ff # 12 ad2a# f0eb7a;
 border-style: solid;
 border-width: 20 px;
}

示例 2

在上面基礎上， 我們把寬高度都設為 0 時，會呈現上述的邊界斜線。

#test2 {
 height: 0;
 width: 0;
 overflow: hidden; /* 這里設置overflow， font-size， line-height */
 font-size: 0; /*是因為， 雖然寬高度為 0， 但在 IE 6 下會具有默認的 */
 line-height: 0; /* 字體大小和行高， 導致盒子呈現被撐開的長矩形 */
 border-color: #FF9600 #3366ff # 12 ad2a# f0eb7a;
 border-style: solid;
 border-width: 20 px;
}

這時， 其實我們已經看到有上下左右四個三角形了…… 如果，我們把 4 種顏色，只保留一種顏色，余下 3 種顏色設置為透明（或者設置為和背景色相同的顏色），那不就出現一個小三角了么？

示例 3

只保留上面的橙色，看看

#test3 {
 height:0;
 width:0;
 overflow: hidden;
 font-size: 0;
 line-height: 0;
 border-color:#FF9600 transparent transparent transparent;
 border-style:solid;
 border-width:20px;
}

可是，IE 6 下不支持透明啊~，會出現下圖的樣子

找到一個在 IE 6 下邊框透明的文章中找到解決辦法，如下例

示例 4

IE 6 下， 設置余下三條邊的 border-style 為 dashed，即可達到透明的效果~ 具體原因可以見參考資料 3

#test3 {
 height:0;
 width:0;
 overflow: hidden;
 font-size: 0;
 line-height: 0;
 border-color:#FF9600 transparent transparent transparent;
 border-style:solid;
 border-width:20px;
}

當然，在 IE 6 下，不設置透明， 將其顏色設置為背景色，使其看不出來也是可以的。

示例 5

上面我們畫的小三角的斜邊都是依靠原來盒子的邊，還有另外一種形式的小三角， 就是斜邊在盒子的對角線上

#test5 {
 height: 0;
 width: 0;
 overflow: hidden;
 font-size: 0;
 line-height: 0;
 border-color: #ff9600 #3366ff transparent transparent;
 border-style: solid solid dashed dashed;
 border-width: 40px 40px 0 0; 
}

保留其中一種顏色，就可以得到斜邊在對角線上的三角形了…… 多個這樣的三角形，通過設置邊框大小，顏色，拼湊起來可以形成任意形狀的三角形。

像這種不規則的三角形，延伸一下，放在氣泡框上，就可以省去拼背景圖片的麻煩了。

另外，關于氣泡框，可以使用棱形字符（◆）來實現，設置其 font-size，顏色和背景色一致，定位可以使用 margin 負值和 absolute 絕對定位來實現。

應用之圓角生成

應該說是近似圓角，其實由一個高度非常小的梯形展示出來

上梯形（無上邊框，下左右 3px 寬度， 左右顏色去掉）+ 矩形 + 下梯形

自適應圓角 1：

整個 rc 設置為 float: left 或 display: inline-block 分為top，bd，bottom， top 中又有兩個層 rc1 和 rc2，rc1 只設置 border-top，高度為 0，并設置左右 margin 呈短小的一橫線，rc2 只設置左右 border 并且左右 margin 小于 rc1，height 為 1px，中間 bd 設置左右 border，不設置左右 margin。

不過 IE 6/7 出現 bug：rc 在 IE 6 中依然顯示為 dispaly: block，而 IE 7 中 top 和 bottom 縮成一坨，不肯擴展開來，而在 rc1/rc2/rc3 中插入文字 xxx 后只能擴展到文字寬度，不能與 bd 對齊。

自適應圓角 2：

自 google 系產品的 1px 圓角按鈕，三層 div， 最外層 div1 正常設置邊框寬度 1px， 呈現出上下邊框線，中間 div2 只設置左右邊框，且把左右 margin 設置成負值，呈現出圓角處的 4 個圓點 內層 div3 同樣只設置左右邊框，同時 margin 上下空出 div2 的高度，margin 左右也設置與 div2 相同的負值。

其他小問題

• 透明:

IE 6 瀏覽器不支持 transparent 透明屬性，就 border 生成三角技術而言，直接設置對應的透明邊框的 border-style 屬性為 dotted 或是 dashed 即可解決這一問題，原因是在 IE 6 下，點線與虛線均以邊框寬度為基準，點線長度必須是其寬度的 3 倍以上（height >= border-width * 3），虛線寬長度必須是其寬度的 5 倍以上（height >= border-width * 5），否則點線和虛線都不會出現。

• IE 6 的奇偶 bug：

如果定位外框高度或是寬度為奇數，則 IE 6 下，絕對定位元素的低定位和右定位會有1像素的誤差。所以，盡量保證外框的高度或寬度為偶數值。

• IE 6 的空 div 高度 bug：

IE 6 下，空 div 會有莫名的高度，也就是說 height: 0 不頂用，此時形成的尖角的實際占高于其他瀏覽器是有差異的。可使用 font-size: 0 + overflow: hidden 修復此問題。

• filter: chroma 濾鏡

該屬性屬性可以設置一個對象中指定的顏色為透明色，如：

border-color: pink;
filter: chroma(color=pink);

希望本文能幫助到您！

點贊+轉發，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）

關注 ｛我｝，享受文章首發體驗！

每周重點攻克一個前端技術難點。更多精彩前端內容私信 我 回復“教程”

原文鏈接：https://fed.taobao.org/blog/2010/08/05/css-border-hack/

作者：admin