黑马程序员技术交流社区

标题: 【上海校区】自编教材《web标准网页制作实例教程》连载6 [打印本页]

作者: bbacc 时间: 2017-9-7 12:06
标题: 【上海校区】自编教材《web标准网页制作实例教程》连载6

1.1.1. border边框

边框是对象的边界框，用来设置对象的边框样式，实现美化美观。边框起到分割、规划布局作用。

边框（border）有3 个相关属性。

n border-width

设定边框的宽度，其值不能是百分比，必须是一个长度值或thin（细边框）、medium（中等边框）、thick（粗边框）这几个值之一。

可以使用下面的属性单独定义边框的上下左右的宽度：

border-top-width、border-bottom-width、border-left-width、border-right-width

n border-style

设定边框的样式，有dotted（点线）、dashed（虚线）、solid（实线）等一些常用的文本值。下图3-5给出了产用三种边框样式的显示效果：

图3-5

同样也可以单独设置某个方向上的边框样式，例如：

border-top-style、border-bottom-style、border-left-style、border-right-style

n border-color

设定边框的颜色，该属性值可以是十六进制的颜色编码或者颜色名。

同样也可以单独设置某个方向的边框颜色：

border-top-color、border-bottom-color、border-left-color、border-right-color

n 简写方式border

简写方式直接用border表示，是复合样式，由宽度、线型和颜色组成，每个属性中间用空格分开。

border:5px #000000 solid;

边框：宽度颜色线型

线型可替换：solid实线、dashed虚线、dotted点线等比较常用的几种线型。

也可在border后加上下左右方位，来表示不同方向上的边框样式。例如：

border-top:#000000 solid 5px; /*定义上边框为5像素的黑色实线*/

border-left:#000000 solid 5px; /*定义左边框为5像素的黑色实线*/

border-right:#000000 solid 5px; /*定义右边框为5像素的黑色实线*/

border-bottom:#000000 solid 5px; /*定义下边框为5像素的黑色实线*/

作者: Yin灬Yan 时间: 2017-9-17 19:15
我来占层楼啊

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2