根据慕课网教程,整理相关知识如下:
一、border-width
border-width不支持百分比,类似的还有outline、box-shadow、text-shadow等。
border-width支持关键字:thin、medium(默认值)、thick。
二、border-style
none:定义无边框;
hidden:与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突;
dotted:定义点状边框。在大多数浏览器中呈现为实线;
dashed:定义虚线。在大多数浏览器中呈现为实线;
solid:定义实线;
double:定义双线,双线的宽度等于 border-width 的值;
groove:定义 3D 凹槽边框,其效果取决于 border-color 的值;
ridge:定义 3D 垄状边框,其效果取决于 border-color 的值;
inset :定义 3D inset 边框(内凹),其效果取决于 border-color 的值;
outset:定义 3D outset 边框(外凸),其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
三、border-color
当没有指定border-color时,边框颜色被设置为当前元素color属性.
四、border与三角图形的构建
五、border与透明边框
六、border在布局中的应用
利用border实现等高布局(局限:不支持百分比宽度)