CSS Border使用小分享 copy from 喬花 at taobao ued blog

來源:互聯網
上載者:User
文章目錄
  • 原理
  • 應用之圓角產生
  • 其他小問題

之前在懶懶分會上分享的一點關於border畫小圖的內容, 完整的ppt在這裡
.

原理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);
相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。