-
/*完整代碼：使用梯形疊加實(shí)現(xiàn)偽圓角效果*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width:600px; height:200px; background:red; } .border{ width:580px;height:50px; border:10px solid; } .top{ border-color:transparent transparent red; } .bottom{ border-color:red transparent transparent; } </style> </head> <body> <div class="top border"></div> <div class="box"></div> <div class="bottom border"></div> </body> </html>查看全部
-
border實(shí)現(xiàn)三角原理： width: 100px; height: 100px; border: 100px solid; border-color: red yellow blue green; border梯形原理繪圖： .triangle{ width:600px; border:100px solid; border-color:transparent transparent #c00;查看全部
-
border寬度不可使用百分比，受此限制，無法用于百分比布局需要； boder-color屬性可繼承color，因此可用于一次性優(yōu)化多個(gè)布局； border可以透明，transparent屬性，可利用此屬性生成三角或者梯形； border-style中的double及dotted可用于創(chuàng)建三條短線樣式、圓。 border以及background配合使用，可以定位背景圖片至右側(cè)。（backgroud-positon默認(rèn)相對左上角） background定位的局限 只能相對左上角數(shù)值定位，不能相對于右下角 background-position:50px 40px;（background-position默認(rèn)相對于左上方定位的） 距離左邊緣一直50px一直很簡單，但是距離右邊邊緣 借助border定位（background-position定位）background定位的局限 只能相對左上角數(shù)值定位，不能相對于右下角 background-position:50px 40px;（background-position默認(rèn)相對于左上方定位的） 距離左邊緣一直50px一直很簡單，但是距離右邊邊緣 借助border定位（background-position定位）查看全部
-
border-style:solid;實(shí)線 border-style:dotted;點(diǎn)線（實(shí)線圓角效果） border-style:double;雙線 border-style:inset;內(nèi)凹，大眼瞪小眼 border-style:outset;外凸 border-style:groove;溝槽查看全部
-
border-width不支持百分比值：語義和使用場景決定，邊框不會(huì)因設(shè)備大小而變化 類似：outline,box-shadow,text-shadow,... border-width支持關(guān)鍵字thin，medium,thick,默認(rèn)medium：3px， 用的最多是thin：1px，因?yàn)閎order-style:double至少3px才有效果查看全部
-
透明border突破可視區(qū)域的限制。查看全部
-
border兼容性好的實(shí)現(xiàn)復(fù)選框查看全部
-
畫三角的 mark一下查看全部
-
#checkbox2 { cursor:pointer; width:20px; height:20px; 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; }查看全部
-
借助border實(shí)現(xiàn)圖片距離右下角定位查看全部
-
border實(shí)現(xiàn)三角原理： width: 100px; height: 100px; border: 100px solid; border-color: red yellow blue green; 寬高設(shè)置為0，顏色設(shè)置為透明就可以實(shí)現(xiàn)想要的效果。查看全部
-
（兼容IE78）利用border-style：double實(shí)現(xiàn)三道杠（padding也可以，但不兼容IE7/8）查看全部
-
border實(shí)現(xiàn)圖片右側(cè)案例： border-right: 50px solid transparent; background-position: 100% 40px;查看全部
-
bckground-position圖片默認(rèn)相對左上方定位的！查看全部
-
border-style：dotted瀏覽器差異查看全部
舉報(bào)
0/150
提交
取消