-
background定位的局限（css2.1）：只能相對(duì)左上角數(shù)值定位，不能相對(duì)右下角
border-right: 50px solid transparent; // 右側(cè)一個(gè)透明的邊框
background-position：100% 45px; // 100%右側(cè)定位不計(jì)算border區(qū)域
查看全部 -
border-color默認(rèn)就是color：當(dāng)沒有指定border-color的時(shí)候，會(huì)使用color的顏色
類型的還有 box-shadow，text-shadow，outline等
實(shí)際用途：hover
查看全部 -
border-style類型
solid: 實(shí)線
dashed: 虛線，Chrome和Firefox顯示的比較稀疏，IE顯示的比較密集
dotted: 點(diǎn)線，Chrome和Firefox顯示的是肖方，IE顯示的是小圓
double:雙線，兼容性很好，計(jì)算規(guī)則：雙線寬度永遠(yuǎn)相等，中間間隔+/-1，1px: 0(左實(shí)線)+1(中間區(qū)域)+0(右實(shí)線), 2px:1+0+1, 3px:1+1+1，4px:1+2+1,5px: 2+1+2，6px:2+2+2,7px:2+3+2
inset: 內(nèi)凹
outset：外凸
groove：溝槽
ridge：山脊
查看全部 -
border-width不支持百分比值，受語義和使用場(chǎng)景決定的，不會(huì)因?yàn)樵O(shè)備變大就按比例變大
border-width默認(rèn)值是 medium（3px）
查看全部 -
兩欄等高布局：不支持百分比分寬度
查看全部 -
添加透明邊框增加點(diǎn)擊區(qū)域
增加可視渲染區(qū)域
查看全部 -
background
查看全部 -
border
查看全部 -
border
查看全部 -
fsadsdal sdaskljdklas html?.sds1
查看全部 -
border-color
1、在沒有指定border-color時(shí)，默認(rèn)使用color作為邊框色
????box-shadow、text-shadow、outline均有此特性
2、案例
只需一個(gè)color的hover變化，就可以一起變色；且transition過渡也只要一個(gè)color屬性
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>Document</title> <style> .add?{ display:?inline-block; width:?120px; height:?120px; border:?1px?solid; color:?#ccc; position:?relative; transition:?color?0.5s; } .add:before?{ content:?""; display:?block; width:?80px; border-top:?10px?solid; position:?absolute; left:20px; top:?55px;? } .add:after?{ content:?""; display:?block; height:?80px; border-left:?10px?solid; position:?absolute; left:?55px; top:?20px;? } .add:hover?{ color:?#234BD5; } </style> </head> <body> <a?href=""?class="add"></a> </body> </html>查看全部 -
border-style
1、border-style:solid;? ? 實(shí)線
2、border-style:dashed;? ?虛線
3、border-style:dotted;? ?點(diǎn)線
<!DOCTYPE?html> <html> ????<head> ????<meta?charset="UTF-8"> ????<title>Document</title> ????<style> ????????.radius_container?{ ????????position:?relative; ????????}? ????????.box?{ ????????position:?absolute; ????????width:?150px; ????????height:?150px; ????????overflow:?hidden; ????????} ????????.dotted?{ ????????width:?100%; ????????height:?100%; ????????border:?150px?dotted?#EF2424; ????????} ????????.radius-right_top?{ ????????top:?0; ????????left:?400px; ????????} ????????.radius_right_bottom?{ ????????left:?400px; ????????top:?200px; ????????} ????????.radius_left_bottom?{ ????????left:?0; ????????top:?200px; ????????} ????????.row?{ ????????position:?absolute; ????????top:?75px; ????????width:?550px; ????????height:?200px; ????????background:?rgba(30,50,190,0.5); ????????color:?#ffffff; ????????z-index:?3; ????????font-size:?100px; ????????line-height:?200px; ????????text-align:?center; ????????} ????????.col?{ ????????position:?absolute; ????????left:?75px; ????????width:?400px; ????????height:?350px; ????????background:?rgba(30,50,190,0.5); ????????z-index:?2; ????????} ????</style> ????</head> ????<body> ????????<div?class="radius_container"> ????????????<div?class="row">按鈕</div> ????????????<div?class="col"></div> ????????????<div?class="box"> ????????????????<div?class="dotted"></div> ????????????</div> ????????????<div?class="box?radius-right_top"> ????????????????<div?class="dotted"></div> ????????????</div> ????????????<div?class="box?radius_right_bottom"> ????????????????<div?class="dotted"></div> ????????????</div> ????????????<div?class="box?radius_left_bottom"> ????????????????<div?class="dotted"></div> ????????????</div> ????????</div> ????</body> </html>
4、border-style:double;? ? 雙線（兼容性非常好）
規(guī)律：雙線寬度永遠(yuǎn)相等，中間間隔±1
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>Document</title> <style> /*border-style設(shè)為double，實(shí)現(xiàn)三道杠*/ .double?{ width:?120px; height:?20px; background:?rgba(0,0,0,0.1); border-top:?60px?double?#CE2424; border-bottom:?20px?solid?#CE2424; } </style> </head> <body> <!--?border-style設(shè)為double，實(shí)現(xiàn)三道杠?--> <div?class="double"></div> </body> </html>
5、border-style:inset;? ? 內(nèi)凹（風(fēng)格過時(shí)，兼容性差）
6、border-style:outset;? ?外凸（風(fēng)格過時(shí)，兼容性差）
7、border-style:groove;? ?溝槽（風(fēng)格過時(shí)，兼容性差）
8、border-style:ridge;? ? ? ?山脊（風(fēng)格過時(shí)，兼容性差）
查看全部 -
border-width
1、不支持百分比，由其語義和使用場(chǎng)景決定。因?yàn)檫吙驅(qū)挾炔粫?huì)因設(shè)備變大就按比例變大
2、支持關(guān)鍵字：thin、medium（默認(rèn)）、thick
thin：細(xì)的?????1px
medium：中等的????3px（默認(rèn)值）；因?yàn)閎order-style：double至少3px才有效果
thick：粗的????5px
其他不支持百分比的屬性：
outline、box--shadow、text-shadow……
查看全部 -
border-width不支持百分比
border-width 3種 常用關(guān)鍵字 thin（1px），medium（3px）、thick（5px）。默認(rèn)medium
查看全部 -
border的transparent屬性非常常用，兼容性很好
查看全部 -
border邊框交界處是斜線
查看全部 -
border-color的默認(rèn)顏色就是color
查看全部 -
border-style：double類型
查看全部 -
border-width不支持百分比，主要是由語義和使用場(chǎng)景決定的
查看全部 -
加號(hào)變色。查看全部
-
1.添加了過渡 2.利用了calc函數(shù)居中 3.聲明父div，設(shè)置border的時(shí)候不聲明顏色，只聲明color 4.before，after不聲明color，繼承父元素div的color <!DOCTYPE?html> <html> <head><meta?charset="UTF-8"> <title>Document</title> <style> div?{? border:?1px?solid; color:?blue; width:?150px; height:?150px; position:?relative; transition:?1s?color; } /*?橫著放?*/ div::before?{?? ?content:?""; ?width:?60px; ?height:?20px; ?border-bottom:?20px?solid; ?display:inline-block; ?box-sizing:?border-box; ?position:?absolute; ?left:?calc(50%?-?30px); ?top:?calc(50%?-?10px); ?} ?/*?豎著放?*/ ?div::after?{ ?content:?""; ?height:?60px; ?width:?20px; ?border-left:?20px?solid; ?display:inline-block; ?box-sizing:?border-box; ?position:?absolute; ?z-index:?1; ?left:?calc(50%?-?10px); ?top:?calc(50%?-?30px); ?} ?div:hover?{ ?color:?red; ?} ?</style> ?</head> ?<body> ?<div></div> ?</body> ?</html>查看全部 -
復(fù)選框的樣式分析
查看全部 -
border制作三角形狀出來的樣本。
查看全部 -
可以試著去修改右端的邊框樣式，在進(jìn)行定位分析。無論邊框怎么變換圖片的位置都是相對(duì)于右面邊框的絕對(duì)0位置。
查看全部 -
border-style:double;
查看全部 -
border-color默認(rèn)顏色就是color，類似的還有box-shadow，text-shadow
查看全部 -
border-width不支持百分比：沒有因?yàn)樵O(shè)備變化而變化的特性，類似的還有outline，box-shadow，text-shadow
查看全部 -
border-withd不支持百分比查看全部
-
border-width不支持百分比
支持關(guān)鍵字：thin,medium(默認(rèn)值),thick
查看全部
舉報(bào)