深入理解border

根据慕课网教程,整理相关知识如下:

一、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实现等高布局(局限:不支持百分比宽度)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容