CSS Border使用小分享)

文章目錄

• 原理
• 應用之圓角產生
• 其他小問題
• 參考資料

CSS Border使用小分享原理css盒模型

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

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

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

 

樣本1

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

#test1 {    height:20px;    width:20px;    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;    border-style:solid;    border-width:20px;}

 

樣本2

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

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

這時, 其實我們已經看到有上下左右四個三角形了..如果, 我們把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;}

可是, IE6下不支援透明啊~~~, 會出現的樣子

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

 

樣本4

IE6下, 設定餘下三條邊的border-style為dashed,,,即可達到透明的效果~ 具體原因可以見參考資料3

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

當然, 在IE6下, 不設定透明, 將其顏色設定為背景色, 使其看不出來也是可以的.

 

樣本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在IE6中依然顯示為dispaly:block,而IE7中top 和 bottom縮成一坨,不肯擴充開來,而在rc1/rc2/rc3 中插入文字xxx後只能擴充到文字寬度,不能與bd對齊.

- 見自適應圓角1

自適應圓角2

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

- 見自適應圓角2

其他小問題

- 透明:

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

- IE6的奇偶bug:

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

- IE6的空div高度bug:

IE6下,空div會有莫名的高度,也就是說height:0;不頂用,此時形成的尖角的實際占高於其他瀏覽器是有差異的.可使用font-size:0; + overflow:hidden;修複此問題.

- filter: chroma濾鏡

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

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

 

參考資料

1. CSS小三角原理
2. CSS氣泡效果
3. IE6下邊框透明原理解析
4. CSS3實現的機器貓圖形