border属性在项目中使用的还是蛮频繁的。例如页签、按钮这样的。
border简写属性是按照如下属性设置的:
border:border-width/border-style/border-color.
如果说我需要一个灰色的1像素的实线边框
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8"/>
<title></title>
<style type="text/css">
ul {
list-style:none;
}
li {
border:1px solid #cccccc;
width:60px;
height:40px;
float:left;
}
</style>
</head>
<body>
<ul>
<li>
tab1
</li>
</ul>
</body>
</html>
当然，我们也可以分开来写。
li {
border-width:1px;
border-style:solid;
border-color:#cccccc;
width:60px;
height:40px;
float:left;
}
了解了border的基本属性，我们就来看看如何用border-color这个属性来制作小三角形。有时候，我们在项目中可能需要这样的效果。一个tab页签的当前页中我们需要一个倒三角形的小下标来指示。
一般来说我们可能想到的是使用切好的小三角形图片使用定位来做。其实，我们完全可以使用border-color这个属性来替换掉图片。
a {
display:block;
width:50px;
height:50px;
border-style:solid;
border-color:#999999 #ff0000 #000000 #4cff00;
border-width:20px;
}
我们给一个a元素设置了边框的值，显示如下：
在我们的浏览器中，每个边框是以等腰梯形的形式闭合在一起的。如果我们要让等腰梯形变成一个三角形。那么，我们a元素中间的content内容就要把width和height全部设置为0px.这样的话中间的白色content部分就会消失不见了。只剩下边框了。
a {
display:block;
width:2px;
height:2px;
border-style:solid;
border-color:#999999 #ff0000 #000000 #4cff00;
border-width:20px;
}
当width和height为2px时，中间还有一个长宽为2px的正方形。当完全为零时，就和我上面说到的一样，变成了一个四个闭合在一起的等边三角形。
而这个三角形的大小就可以通过border-width这个属性来改变等边三角形的高来进行控制。
在border-width中还有一个transparent这个值。它是让按照上-右-下-左排序的边框设置为透明色。所以我们可以让下-右-左全部为透明色，只留下上面的灰色三角形，这样我们就通过css来完成了一个小三角形的制作。
a {
display:block;
width:0px;
height:0px;
border-style:solid;
border-color:#999999 transparent transparent;
border-width:30px;
}
时间： 2024-10-12 23:59:29