【学习笔记】CSS深入理解之border

发布时间:2019-06-07 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【学习笔记】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...

脚本宝典总结

以上是脚本宝典为你收集整理的【学习笔记】CSS深入理解之border全部内容,希望文章能够帮你解决【学习笔记】CSS深入理解之border所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。