HTML用CSS设置框线的颜色详解
1、首先我来设置框线为实线，这个必须先设置不然就会使用默认的框线none，就是没有框线的意思了。首先我们来设置上下左右四个框线都为红色，具体实线代码如下：
<html>
<head>
<title>CSS框线设置</title>
<style type="text/css">
.imgduibi{
border-style:solid;
border-color:red;
}
</style>
</head>
<body>
<img src="2.jpg" />
<img class="imgduibi" src="2.jpg" />
</body>
</html>
可以看到下图的图二这个框线变成了红色和第一个没有框线的默认做了对比。
2、现在来设置上下框线为红色，左右框线为蓝色这个组合的实线代码如下：
<html>
<head>
<title>CSS框线设置</title>
<style type="text/css">
.imgduibi{
border-style:solid;
border-color:red blue;
}
</style>
</head>
<body>
<img src="2.jpg" />
<img class="imgduibi" src="2.jpg" />
</body>
</html>
可以看到下图的具体效果，第二幅图的左右是蓝色和上下红色框线。
3、还可以使用上为红色，左右为蓝色，下为绿色这个组合设计，具体代码如下：
<html>
<head>
<title>CSS框线设置</title>
<style type="text/css">
.imgduibi{
border-style:solid;
border-color:red blue green;
}
</style>
</head>
<body>
<img src="2.jpg" />
<img class="imgduibi" src="2.jpg" />
</body>
</html>
可以看到下图的具体效果，用三种不同的颜色来设计框线，实线了上 左右 和下这个三个不同颜色的框线。
4、其实还可以使用每个框线一个颜色来设置，用红 蓝 绿 黄这四个颜色来表示上 右 下 左这四个框线的颜色，具体代码如下：
<html>
<head>
<title>CSS框线设置</title>
<style type="text/css">
.imgduibi{
border-style:solid;
border-color:red blue green yellow;
}
</style>
</head>
<body>
<img src="2.jpg" />
<img class="imgduibi" src="2.jpg" />
</body>
</html>
可以看到如下图所示，每条框线都具有一个颜色。
5、除了使用英文来设置颜色还可以使用十六进制来设置，具体的代码如下：
<html>
<head>
<title>CSS框线设置</title>
<style type="text/css">
.imgduibi{
border-style:solid;
border-color:#ff0000;
}
</style>
</head>
<body>
<img src="2.jpg" />
<img class="imgduibi" src="2.jpg" />
</body>
</html>
用#ff0000;这个值来设置框线，如下图框线成为了红色的。
6、还可以使用rgb来设置框线的颜色，具体的代码如下所示：
<html>
<head>
<title>CSS框线设置</title>
<style type="text/css">
.imgduibi{
border-style:solid;
border-color:rgb(255,0,0);
}
</style>
</head>
<body>
<img src="2.jpg" />
<img class="imgduibi" src="2.jpg" />
</body>
</html>
使用rgb(255,0,0)来设置框线的颜色和使用英文或者十六进制来设置的效果是一样的。
