css盒模型
乙個盒子包括: margin+border+padding+content
– 上下左右邊框交界處出呈現平滑的斜線. 利用這個特點, 通過設定不同的上下左右邊框寬度或者顏色可以得到小三角, 小梯形等.
– 調整寬度大小可以調節三角形形狀.
示例1一般情況下, 我們設定盒子的寬高度, 及上下左右邊框, 會呈現如下圖
#test1示例2
在上面基礎上, 我們把寬高度都設為0時, 會呈現上述的邊界斜線.
#test2這時, 其實我們已經看到有上下左右四個三角形了..如果, 我們把4種顏色, 只保留一種顏色, 餘下3種顏色設定為透明(或者設定為和背景色相同的顏色), 那不就出現乙個小三角了麼
示例3只保留上面的橙色, 看看
#test3可是, ie6下不支援透明啊~~~, 會出現下圖的樣子
找到乙個在ie6下邊框透明的文章中找到解決辦法, 如下例
示例4ie6下, 設定餘下三條邊的border-style為dashed,,,即可達到透明的效果~ 具體原因可以見參考資料3
#test4當然, 在ie6下, 不設定透明, 將其顏色設定為背景色, 使其看不出來也是可以的.
示例5上面我們畫的小三角的斜邊都是依靠原來盒子的邊, 還有另外一種形式的小三角, 就是斜邊在盒子的對角線上
#test5保留其中一種顏色, 就可以得到斜邊在對角線上的三角形了…多個這樣的三角形, 通過設定邊框大小, 顏色, 拼湊起來可以形成任意形狀的三角形.
像這種不規則的三角形, 延伸一下, 放在氣泡框上, 就可以省去拼背景的麻煩了.
.應該說是近似圓角,,其實由乙個高度非常小的梯形展示出來
- 上梯形(無上邊框,下左右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 中插入文字***後只能擴充套件到文字寬度,不能與bd對齊.
- 見
自適應圓角2
- 自 google 系產品的 1px 圓角按鈕,,,三層div, 最外層div1正常設定邊框寬度1px, 呈現出上下邊框線, 中間div2只設定左右邊框, 且把左右margin設定成負值, 呈現出圓角處的4個圓點 內層div3同樣只設定左右邊框, 同時margin上下空出div2的高度, margin左右也設定與div2相同的負值.
- 見
- 透明:
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);
CSS border 屬性使用說明
border 定義四個邊的寬度,樣式,顏色 取值 inherit 邊框寬度,樣式,顏色屬性中的乙個或多個 inherit 繼承 初始值 none 繼承性 否 適用於 所有元素 border 邊框 border不能分別定義4個邊框的寬度,顏色和樣式,只能統一定義,不可以對四個邊設定不同的值,和marg...
C 實用小技巧
系統自帶全球唯一標示id system.guid.newguid tostring 字元竄或者變數前加乙個 標示為路徑 muban.doc 複製檔案 system.io.file.copy 檔案路徑,檔案路徑 刪除檔案 system.io.file.delete 檔案路徑 結束程序 foreach ...
Delphi實用小函式
1.write log entries to file.begin of logger uses sysutils procedure logger msgtext string varflog textfile begin assignfile flog,c test.txt trywriteln...