代码改变世界

Border-color使用

2012-07-23 14:26  江苏黑马  阅读(303)  评论(0)    收藏  举报
  1. 相关属性：border-top-color, border-right-color, border-bottom-color , border-left-color。
  2. 目前 border-color属性支持的浏览器很少，仅有Firefox支持，所以想实现多边框的效果我们只需使用-moz前缀就可以了。
  3. 如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6种颜色，那么最后一个颜色将被添加到剩下的宽度。
  4. 效果图：
  5. 代码：
     1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5         <title>无标题文档</title>
 6         <style>
 7             #show_box {
 8                 border-width: 6px;
 9                 border-style: solid;
10                 -moz-border-bottom-colors: #f00 #0f0 #00f #ff0;
11                 -moz-border-top-colors: #f00 #0f0 #00f #ff0;
12                 -moz-border-left-colors: #f00 #0f0 #00f #ff0;
13                 -moz-border-right-colors: #f00 #0f0 #00f #ff0;
14                 height: 100px;
15                 width: 100px;
16             }
17         </style>
18     </head>
19 
20     <body>
21         <div id="show_box"></div>
22     </body>
23 </html>

     

目前 border-color属性支持的浏览器很少，仅有Firefox支持，所以想实现多边框的效果我们只需使用-moz前缀就可以了。