css border製作三角形、圓角框等的使用

- 透明: 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;修復此問題。

 

下面爲一些border屬性的應用:

截圖:

 

 


 Demo如下:

Html代碼



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章