今天我们接着分享边框样式的使用。
我们都知道边框有上下左右,四条边,那么如果我们要对其中的某一条边设置,我该怎么办?
在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样式代码真的是层叠样式,最后设置的效果一定会覆盖前面的效果。这一点尤其需要好好理解。