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