Border-color使用

-->

Border-color使用

2020-10-31 10:59发布

站内文章 / 后端开发

43 0

太酷不给撩

女 | 书童

私信

相关属性：border-top-color, border-right-color, border-bottom-color , border-left-color。
目前 border-color属性支持的浏览器很少，仅有Firefox支持，所以想实现多边框的效果我们只需使用-moz前缀就可以了。
如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6种颜色，那么最后一个颜色将被添加到剩下的宽度。
效果图：

代码：

 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>