-
border透明邊框足夠兼容 bakground-position定位 三角圓形 優(yōu)雅增加響應區(qū)域的大小 不使用圖片，實現(xiàn)單復選框區(qū)域大小 .checbox{ width:16px; height:16px; border:1px solid #f00; } 邊框使用盒陰影，原先border變透明用來增加點擊區(qū)域 box-shaw:inset 0 1px,inset 1px 0,inset-2px 0,inset 0 -1px; 增加可視渲染區(qū)域： drow-shaw可以給PNG圖標賦色 在谷歌瀏覽器下，頁面中不可見元素的drop-shadow也是不可見的 text-indent負值隱藏原始圖，無投影，失敗！ clip裁剪隱藏，無投影，失敗！ margin負值隱藏原始圖，無投影，失?。?left負值隱藏原始圖，無投影，失敗! (可視區(qū)域元素外無投影) 透明border突破可視區(qū)域的限制查看全部
-
實現(xiàn)三角的原理：凹口變大，顏色變透明 實際使用場景，1、下拉菜單 2、兩個三角疊加 模擬圓角（有四個小圓角、border梯形組合而成、）查看全部
-
background定位的局限 只能相對左上角數(shù)值定位，不能相對于右下角 background-position:50px 40px;（background-position默認相對于左上方定位的） 距離左邊緣一直50px一直很簡單，但是距離右邊邊緣 借助border定位（background-position定位）查看全部
-
border-color默認顏色就是color .box{ border:10px solid; color:#00f;} 當沒有指定border-color的時候，會使用color作為邊框色！ box-shadow盒陰影 hover: 選擇器用于選擇鼠標指針浮動在上面的元素 只要一個color hover變化，就可以一起變色！且transition過渡也只要一個color屬性查看全部
-
border-style:solid;實線 border-style:dotted;點線（實線圓角效果） border-style:double;雙線 border-style:inset;內(nèi)凹，大眼瞪小眼 border-style:outset;外凸 border-style:groove;溝槽查看全部
-
border-width不支持百分比值：語義和使用場景決定，邊框不會因設(shè)備大小而變化 類似：outline,box-shadow,text-shadow,... border-width支持關(guān)鍵字thin，medium,thick,默認medium：3px，用的最多是thin：1px，因為border-style:double至少3px才有效果查看全部
-
border寬度不可使用百分比，受此限制，無法用于百分比布局需要； boder-color屬性可繼承color，因此可用于一次性優(yōu)化多個布局； border可以透明，transparent屬性，可利用此屬性生成三角或者梯形； border-style中的double及dotted可用于創(chuàng)建三條短線樣式、圓。 border以及background配合使用，可以定位背景圖片至右側(cè)。（backgroud-positon默認相對左上角）查看全部
-
三角： { width:0px height:0px border:100px solid boder-color:red green transition transition(透明) }查看全部
-
border-right:50px solid transparent; background-position:100% 40px查看全部
-
background-position：50px 40px 默認左邊距查看全部
-
transition查看全部
-
增加響應區(qū)域查看全部
-
border-color顏色未指定時，使用color的顏色查看全部
-
border-color 就是color查看全部
-
border-width不支持百分比查看全部
舉報
0/150
提交
取消