CSS3详解：border color

最新推荐文章于 2022-06-08 14:10:00 发布

Dean_Y

最新推荐文章于 2022-06-08 14:10:00 发布

阅读量929

点赞数

今天的主题是 border color。大家都知道css中的border属性是经常用到的，其写法很简单，如：border:1px solid #333；border color和这有所不同，是不能简写的。

当前浏览器支持情况：Firefox

border color写法说明：

-moz-border-top-colors:#A #B #C # D ···；其中A、B、C、D 等都是6位颜色值，方向是由外向内；

Tips：定义border color的时候需要border的支持。

border color实例：

CSS源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.demo {
margin : 20px ;
width : 300px ;
height : 200px ;
text-align : center ;
color : #0390B6 ;
font : bold 20px/ 180px microsoft yahei ;
background : #f2fcff ;
border : 7px solid #2E9DE6 ;
border-radius : 20px ;
-moz-border-top-colors : #0390B6 #0992BD #1796CC #1C98D2 #259ADC #2E9DE6 ;
-moz-border-right-colors : #0390B6 #0992BD #1796CC #1C98D2 #259ADC #2E9DE6 ;
-moz-border-bottom-colors : #0390B6 #0992BD #1796CC #1C98D2 #259ADC #2E9DE6 ;
-moz-border-left-colors : #0390B6 #0992BD #1796CC #1C98D2 #259ADC #2E9DE6 ;
}