您的位置:首页> 前端教程> CSS3教程
文章导航

CSS border-colors

2018-7-20 01:15| 作者: admin| 查看: 1606| 评论: 0|来自: 蚂蚁部落

特别说明:border-colors属性已经被废弃,虽然当前有部分浏览器依然支持。

border-color是CSS2最常用属性之一,可以设置边框的颜色。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  border-width:10px;
  border-style:solid;
  border-color:green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上代码可以设置div四个边框的颜色,当然也可以给每一个边框设置不同的颜色。

代码修改如下:

[CSS] 纯文本查看 复制代码
div{
  width:100px;
  height:100px;
  border-width:10px;
  border-style:solid;
  border-top-color:green;
  border-right-color:red;
  border-bottom-color:black;
  border-left-color:blue;
}

当然也可以合并起来分别设置四个边框的颜色。

代码实例如下:

[CSS] 纯文本查看 复制代码
div{
  width:100px;
  height:100px;
  border-width:10px;
  border-style:solid;
  border-color:green red black blue;
}

代码实现了同样的效果,遵循原则与margn或者padding类似。

四个颜色值分别作用域上右下左四个方位边框。

以上介绍的都是CSS2的规则,发展到CSS3,出现了border-color属性的加强版本。

语法结构:

[CSS] 纯文本查看 复制代码
border-top-colors: <color> <color> <color>*; /*顶边边框*/
border-right-colors:<color> <color> <color>*; /*右边边框*/
border-bottom-colors: <color> <color> <color>*; /*底边边框*/
border-left-colors: <color> <color> <color>*; /*左边边框*/

四个属性可以设置四个方位边框的颜色,每一个属性都可以一次设置多个颜色值,每一个颜色值可以给边框的一个像素设置颜色,假设边框是5px,但是只设置了3个颜色值,那么这三个颜色值分别作用域边框的由内到外三份1px边框,剩余的像素的边框颜色将会以最后一个颜色填充。

特别说明:上面属性不能够合并成如下形式:

[CSS] 纯文本查看 复制代码
border-colors: <color> <color> <color>*;

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  border-width:10px;
  border-style:solid;
  -moz-border-top-colors:red blue green black; /*顶边边框*/
  -moz-border-right-colors:blue green black; /*右边边框*/
  -moz-border-bottom-colors:blue green black; /*底边边框*/
  -moz-border-left-colors:black green blue; /*左边边框*/ 
}
</style>
</head>
<body>
<div></div>
</body>
</html>

鲜花

握手

雷人
1

路过

鸡蛋

刚表态过的朋友 (1 人)

下一篇:CSS border-image

最新评论

返回顶部