原理

css盒模型

一個(gè)盒子包括: margin+border+padding+content

– 上下左右邊框交界處出呈現(xiàn)平滑的斜線. 利用這個(gè)特點(diǎn), 通過(guò)設(shè)置不同的上下左右邊框?qū)挾然蛘哳伾梢缘玫叫∪? 小梯形等.

– 調(diào)整寬度大小可以調(diào)節(jié)三角形形狀.

示例1

一般情況下, 我們?cè)O(shè)置盒子的寬高度, 及上下左右邊框, 會(huì)呈現(xiàn)如下圖

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

示例2

在上面基礎(chǔ)上, 我們把寬高度都設(shè)為0時(shí), 會(huì)呈現(xiàn)上述的邊界斜線.

#test2 {
    height:0;
    width:0;
    overflow: hidden; /* 這里設(shè)置overflow, font-size, line-height */
    font-size: 0;     /*是因?yàn)? 雖然寬高度為0, 但在IE6下會(huì)具有默認(rèn)的 */
    line-height: 0;  /* 字體大小和行高, 導(dǎo)致盒子呈現(xiàn)被撐開(kāi)的長(zhǎng)矩形 */
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

這時(shí), 其實(shí)我們已經(jīng)看到有上下左右四個(gè)三角形了..如果, 我們把4種顏色, 只保留一種顏色, 余下3種顏色設(shè)置為透明(或者設(shè)置為和背景色相同的顏色), 那不就出現(xiàn)一個(gè)小三角了么

示例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下不支持透明啊~~~, 會(huì)出現(xiàn)下圖的樣子

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

示例4

IE6下, 設(shè)置余下三條邊的border-style為dashed,,,即可達(dá)到透明的效果~ 具體原因可以見(jiàn)參考資料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;
}

當(dāng)然, 在IE6下, 不設(shè)置透明, 將其顏色設(shè)置為背景色, 使其看不出來(lái)也是可以的.

示例5

上面我們畫(huà)的小三角的斜邊都是依靠原來(lái)盒子的邊, 還有另外一種形式的小三角, 就是斜邊在盒子的對(duì)角線上

#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 ;
}

保留其中一種顏色, 就可以得到斜邊在對(duì)角線上的三角形了…多個(gè)這樣的三角形, 通過(guò)設(shè)置邊框大小, 顏色, 拼湊起來(lái)可以形成任意形狀的三角形.

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

另外, 關(guān)于氣泡框, 可以使用棱形字符(◆)來(lái)實(shí)現(xiàn), 設(shè)置其font-size, 顏色和背景色一致, 定位可以使用margin負(fù)值和absolute絕對(duì)定位來(lái)實(shí)現(xiàn), 見(jiàn)示例.

應(yīng)用之圓角生成

應(yīng)該說(shuō)是近似圓角,,其實(shí)由一個(gè)高度非常小的梯形展示出來(lái)

- 上梯形(無(wú)上邊框,下左右3px寬度, 左右顏色去掉)+矩形+下梯形

自適應(yīng)圓角1:

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

- 不過(guò) IE 6&7 出現(xiàn) bug：rc在IE6中依然顯示為dispaly:block,而IE7中top 和 bottom縮成一坨,不肯擴(kuò)展開(kāi)來(lái),而在rc1/rc2/rc3 中插入文字xxx后只能擴(kuò)展到文字寬度,不能與bd對(duì)齊.

 

自適應(yīng)圓角2

- 自 Google 系產(chǎn)品的 1px 圓角按鈕,,,三層div, 最外層div1正常設(shè)置邊框?qū)挾?px, 呈現(xiàn)出上下邊框線, 中間div2只設(shè)置左右邊框, 且把左右margin設(shè)置成負(fù)值, 呈現(xiàn)出圓角處的4個(gè)圓點(diǎn) 內(nèi)層div3同樣只設(shè)置左右邊框, 同時(shí)margin上下空出div2的高度, margin左右也設(shè)置與div2相同的負(fù)值.

 

其他小問(wèn)題

- 透明:

IE6瀏覽器不支持transparent透明屬性,就border生成三角技術(shù)而言,直接設(shè)置對(duì)應(yīng)的透明邊框的border-style屬性為dotted或是dashed即可解決這一問(wèn)題,原因是在IE6下, 點(diǎn)線與虛線均以邊框?qū)挾葹榛鶞?zhǔn),點(diǎn)線長(zhǎng)度必須是其寬度的3倍以上（height>=border-width*3）,虛線寬長(zhǎng)度必須是其寬度的5倍以上（height>=border-width*5）,否則點(diǎn)線和虛線都不會(huì)出現(xiàn).

- IE6的奇偶bug:

如果定位外框高度或是寬度為奇數(shù),則IE6下,絕對(duì)定位元素的低定位和右定位會(huì)有1像素的誤差.所以,盡量保證外框的高度或?qū)挾葹榕紨?shù)值.

- IE6的空div高度bug:

IE6下,空div會(huì)有莫名的高度,也就是說(shuō)height:0;不頂用,此時(shí)形成的尖角的實(shí)際占高于其他瀏覽器是有差異的.可使用font-size:0; + overflow:hidden;修復(fù)此問(wèn)題.

- filter: chroma濾鏡

該屬性屬性可以設(shè)置一個(gè)對(duì)象中指定的顏色為透明色, 如:

 border-color: pink;

 filter: chroma(color=pink);

• css