今天我们接着分享边框样式的使用。
我们都知道边框有上下左右，四条边，那么如果我们要对其中的某一条边设置，我该怎么办？
在css中，我们是可以分别对上下左右的边进行单独的样式设置的。
上边框border-top：
border-top-width:1px;border-top-style:solid;border-top-color:red;
简洁写法：
border-top: 1px solid red;
下边框border-bottom：
border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: blue;
简洁写法：
border-bottom: 1px solid blue;
左边框border-left：
border-left-width: 1px;border-left-style: solid;border-left-color: green;
简洁写法：
border-left: 1px solid green;
右边框border-right:
border-right-width: 1px;border-right-style: solid;border-right-color: orange;
简洁写法：
border-right: 1px solid orange;
以上内容，无论是边框的整体样式，还是局部样式，都是需要设置边框的三个属性的，即宽度、外观和颜色。
| border-top | ||
| border-left | border-right | |
| border-bottom |
示例代码：
<html><head><title>局部边框样式</title><style type="text/css">#d1{width:200px;height:200px;border-top: 1px solid red;border-left: 1px solid green;border-right: 1px solid blue;}</style></head><body><div id="d1"></div></body></html>
这里给大家一种特殊的小技巧，请看代码
<html><head><title>局部边框</title><style type="text/css">#d2{width:200px;height:200px;border: 1px solid black;border-bottom : 0px;}</style></head><body><div id="d2"></div></body></html>
上面的代码，是设置了整体边框，然后对其中一边将宽度设置为0像素，边框没有宽度了，也就不显示了。从这里可以看出来，css样式代码真的是层叠样式，最后设置的效果一定会覆盖前面的效果。这一点尤其需要好好理解。
3438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
