从零开始学web开发之CSS-5.边框样式

简介

要定义一个元素的边框必须要设置三个方面的元素，少设置一个属性浏览器也能正常识别，会以默认值的方式。

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

---

1.border-width

定义边框宽度
语法：

border-width:像素值;

2.border-style

定义边框的样式
语法：

border-style:属性值;

说明：

属性值	说明-最常用属性
none	无样式
hidden	与nono相同,不过应用于表除外.对于表,hidden用于解决边框冲突。
solid	实线
dashed	虚线
dotted	点线
double	双线,双线的宽度等于border-width的值

属性值	说明-3D边框样式
inset	内凹
outset	外凸
ridge	脊线
groove	槽线

当border-width定义得比较小时，3D属性效果几乎一样，只有当border-width定义得足够大时，这几个属性效果才比较明显。

3.border-color

定义边框的颜色
语法：

border-color:颜色值;

4.border属性简洁写法

定义一个元素的边框必须同时设置三个属性： border-width,border-style,border-color

border-width:1px;
border-style:solid;
border-color:red;

这样的写法效率低，所以可以一种简洁的写法进行定义。
border:1px solid red;
实现的效果与上面一致。

5.局部边框样式

边框都有上下左右四条边，而上述三个属性都是用以定义边框的整体样式的，即一个样式会应用于边框的四条边上。

如果想单独对边框进行设置，可以用下面的方法：

上边框:border-top

示例:

border-top-width:1px;
border-top-style:solid;
border-top-color:red;

简洁写法:

border-top:1px solid red;

• 下边框:border-bottom
• 左边框:border-left
• 右边框:border-right

示例与简洁写法同上。
可用以去除边框的某一条连线，如去除下边框线

border-bottom:0px;

不用再写出另外两个属性,因为0px已经代表了无框线了，也就不需要样式与颜色了。

6.注意点

1. 边框定义到哪个元素就会为哪个元素添加边框线，不会为下一层的子元素添加边框线。
2. 为tr设置边框无效果，因为tr是由td组成的,td的样式决定了tr的样式，如果一定要设置tr的边框，需要加上border-collapse属性。
3. border:的简便写法可以不按照width style color的顺序来,浏览一样可以正常解析。

7.示例链接,右键可查看源码

示例网页链接