最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

CSS深入理解之border

XAMPP下载 admin 808浏览 0评论
 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实现等高布局

局限:不支持百分比,只可左边区域根据右边区域变化

转载请注明:XAMPP中文组官网 » CSS深入理解之border

您必须 登录 才能发表评论!