【學習筆記】CSS深刻理解之border

張鑫旭的CSS深刻理解之border學習筆記

border-width

border-width不支持百分比，緣由是邊框自己具備寬度固定的意義，不一樣設備的邊框不會因設備寬度而等比改變。所以從語義上來講，邊框支持百分比毫無心義。text-shadow/box-shadow/outline也有相同語義

border-width的默認標識爲medium，由於border-style爲double時支持的最小寬度爲3px

border-style

• solid - 一條實線
• dashed - 在Chrome/Firefox 和 IE 上渲染效果有寬高比區別，適合單純做爲虛線框使用
• dotted - 在Chrome/Firefox上實線部分以方格圖案展現，IE上實線部分以圓展示。可利用該特性在IE8上實現圓角
• double - 由兩條實線和一條虛線組成，實線寬度相等，虛線寬度爲總寬度-實線寬度*2。可利用該特性實現菜單效果

  https://codepen.io/curlywater...

• 其餘3D效果兼容性不佳，謹慎使用

border-color

在未設置border-color時，color做爲邊框色，border-color不會繼承。text-shadow/box-shadow相似。

能夠利用該特性實現圖標hover變色的效果

https://codepen.io/curlywater...

border與background定位

background-position不計算border區域，只限於padding之內的盒子。能夠利用這一特性實現背景圖片距離容器右側定位

border與三角等圖形構建

利用border相交會產生邊緣等分的內嵌效果，能夠實現三角、梯形等圖形構建

https://codepen.io/curlywater...

常見的應用

https://codepen.io/curlywater...

border與透明邊框

邊框使用box-shadow，原先border變透明來增長點擊區域
使用背景透明的圖片+drop-shadow實現圖標顏色修改：相對定位向左偏移，設置右邊框，外部容器使用overflow:hidden隱藏原始圖標

border與佈局

border實現等高佈局

侷限：不支持百分比，只可左邊區域根據右邊區域變化

https://codepen.io/curlywater...