关注前端开发
HTML5、CSS3、Javascript

CSS3详解:border color

继续我们的CSS3详解系列文章,今天的主题是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的支持。

CSS源码:

.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;
}

ok,介绍完毕,不明白的童鞋可以留言提问。

PS:大前端的代码显示用了一个插件codecolorer,大家觉得怎么样呢?

转载请注明出处大前端 » CSS3详解:border color

分享: