-
虛線邊框比較細查看全部
-
很可愛查看全部
-
border實現(xiàn)等高布局 .box{ border-left；300px solid #222; } .left{ width；300px; margin-left:-300px; float:left; } <div class="box"> <nav class="left"> <h3>導航1</h3> </nav> <section> <div class="module">模塊1</div。 </section> </div> 局限：不支持百分比寬度查看全部
-
border的透明邊框，始于IE7,足夠兼容 優(yōu)雅的增加響應(yīng)區(qū)域大?。?邊框使用盒陰影，原先border變透明用來增加點擊區(qū)域現(xiàn)在復選框點擊區(qū)域大小為20px*20px) .checkbox{ border:2px solid transparent; box-shadow:inset 0 1px,inset 1px 0,inset -1px 0,inset 0 -1px; background-color:#fff; background-clip:content-box; color:#d0d0d5; } 增加可視渲染區(qū)域：drop-shadow可以給png圖標賦色 不能使用overflow:hidden,因為在Chrome瀏覽器下頁面中不可見元素的drop-shadow也是不可見的，因此可以用border，區(qū)域內(nèi)但透明 .icon{ position:relative;left:-20px; border-right:20px solid transparent; filter:drop-shadow(20px 0); }查看全部
-
boder-style:solid 構(gòu)建三角和梯形 .triangle{ width:0px;height:0px; border-width:12px 20px; border-style:solid; border-color:red red transparent transparent; } 上下兩個梯形邊框拼合組成圓角效果查看全部
-
background-position定位只能相對于左上角，當需要距離右邊緣時，可以用border border-right:50px solid transpanrent;(透明邊框) background-position:100% 40px;查看全部
-
boder-color默認顏色就是color，類似的有box-shadow，text-shadow~ 只要一個color hover變化，就可以一起變色查看全部
-
boder-style：dashed;虛線：Chrome/FireFox寬高3:1；IE寬高2:1，因此只能安安靜靜做個虛框 border-style:dotted;點線：Chrome/FireFox:小方；在IE7，IE8中用該樣式畫圓以及圓角矩形： .dotted{ width:150px;height:150px; boder；149px dotted #cd0000 } .box{ width；150px;height:150px; overflow:hidden; } 圓角矩形：多畫兩個矩形 boder-style:double;雙線：計算規(guī)則：雙線寬度永遠相等，中間間隔+-1 可以畫三道杠圖標：{ width:120px;height:20px; boder-top:60px double; boder-bottom:20 solid; }查看全部
-
border-width不支持百分比值：語義和使用場景決定，邊框不會因設(shè)備大小而變化 類似：outline,box-shadow,text-shadow,... border-width支持關(guān)鍵字thin，medium,thick,默認medium：3px，用的最多是thin：1px，因為border-style:double至少3px才有效果查看全部
-
background-position默認左上方定位查看全部
-
默認color顏色查看全部
-
右側(cè)定位查看全部
-
三角形查看全部
-
等高布局實現(xiàn) 1.一側(cè)為固定像素，可以使用border實現(xiàn)； 2.百分比等高布局，用margin，padding實現(xiàn)查看全部
-
圖片定位相對左邊定位，定位不計算邊框，可以將邊框設(shè)置為透明查看全部
舉報
0/150
提交
取消