盒子模型的边框属性

最新推荐文章于 2024-10-27 17:51:09 发布

原创最新推荐文章于 2024-10-27 17:51:09 发布 · 2.8k 阅读

CC 4.0 BY-SA版权

文章标签：

20 篇文章

订阅专栏

本文详细介绍了CSS3中如何设置盒子边框，包括无边框、实线、虚线、点线和双实线等样式。此外，还探讨了表格的细线边框以及如何通过`border-radius`实现圆角边框效果。

一、盒子边框（border）

设置内容	样式属性
上边框	`border-top-style`: 样式 ; `border-top-width` : 宽度 ; `border-top-color` : 颜色 ; `border-top`:宽度样式颜色;
下边框	`border-bottom-style`:样式 ;`border- bottom-width`:宽度;`border- bottom-color`: 颜色; `border-bottom`:宽度样式颜色;
左边框	`border-left-style`: 样式 ; `border-left-width`: 宽度;`border-left-color`:颜色;`border-left`:宽度样式颜色;
右边框	`border-right-style`: 样式;`border-right-width`: 宽度 ; `border-right-color`:颜色 ; `border-right`:宽度样式颜色;
样式综合设置	`border-style`:上边右边下边左边;
宽度综合设置	`border-width`:上边右边下边左边
颜色综合设置	`border-color`:上边右边下边左边
边框综合设置	`border`:四边宽度四边样式四边颜色

二、表格的细线边框

table{ border-collapse:collapse; }

collapse：合并

border-collapse:collapse: 表示边框合并在一起。

三、圆角边框

border-radius: 左上角  右上角  右下角  左下角;

radius 半径