【学习笔记】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...