css盒模型
乙個盒子包括: margin+border+padding+content
– 上下左右邊框交界處出呈現平滑的斜線. 利用這個特點, 通過設定不同的上下左右邊框寬度或者顏色可以得到小三角, 小梯形等.
– 調整寬度大小可以調節三角形形狀.
示例1
一般情況下, 我們設定盒子的寬高度, 及上下左右邊框, 會呈現如下圖
#test1#test2示例3
只保留上面的橙色, 看看
#test3找到乙個在ie6下邊框透明的文章中找到解決辦法, 如下例
示例4
ie6下, 設定餘下三條邊的border-style為dashed,,,即可達到透明的效果~ 具體原因可以見參考資料3
#test4示例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;通過上面給力的文章，我們了解到使用css製作相容的小三角。filter: chroma(color=pink);
但是日常的小三角哪有這麼簡單呢？例如我們的乙個下拉列表，裡面有乙個小三角行的，小三角行有藍色邊框，底色為白色。這就需要運用兩個小三角來製作定位了。
通常設定上面的ul相對於上面的li為position:absolute;
這兩個的小三角行則是通過偽元素來製作，同時通過一些標籤來相容ie6和ie7的。如：
//code from
.header .menu ul:before,.header .menu ul .before
.header .menu ul:after,.header .menu ul .after
CSS實現三角形原理及過程
在開發中，遇到很多的列表都需要用到三角形的箭頭，可以直接用乙個作背景鋪墊，但這樣占用一定的記憶體，對於這種簡單的圖形純css也能實現，它占用的記憶體相對較小,所以相比而言，比更好用。下面是具體實現步驟 1 首先，建立乙個div。給它設定乙個寬高和背景顏色，並給它乙個較大的邊框,將每一邊的邊框設定不同...
css 修改三角形大小 css實現三角形
最近的乙個專案頁面中，有很多三角形icon，在不考慮ie相容性下，使用了css實現三角形，記錄一下 1 實心三角形，利用transparent實現 1 設定線條寬50px，div 寬高0 width 0px height 0px border right 100px solid red border...
css 修改三角形大小 CSS繪製三角形原理及應用
在從 psd 到 html 頁面的過程中，免不了要遇到乙個問題 這個小圖示，可以用 css 效果實現，也可以切圖下來，到底該怎麼選擇呢？在此我個人的選擇一般都是，用 css 實現，當然切圖然後實現也是聰明人的辦法，但是我覺得學好乙個技術最關鍵的不是學習，而是使用。學了不用都是假把式。學了 css 有...