关注前端开发
关注用户体验

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
分享到: 更多 (0)

评论 18

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #11

    谷歌下效果真好

    Genesy5年前 (2012-07-17)回复
  2. #10

    🙄 学习啊

    satsun6年前 (2011-06-17)回复
  3. #9

    Firefox比较给力啊

    coach leather outlet6年前 (2011-04-09)回复
  4. #8

    是所有浏览器都支持的么? 😎 😎

    必须的6年前 (2011-04-02)回复
    • 不是所有哦。。。至少上面的代码只是Firefox

      菠萝6年前 (2011-11-21)回复
  5. #7

    :mrgreen: 要顶一下子

    hear6年前 (2011-03-30)回复
  6. #6

    学习了··· :mrgreen:

    创意图库6年前 (2011-03-30)回复
  7. #5

    什么东西哦,不懂……我不是研究这个的哈,所以博主不必理我哈。

    宁波LED6年前 (2011-03-30)回复
    • :mrgreen: ,这是前端开发需要先了解运用的技术

      浩子6年前 (2011-03-30)回复
  8. #4

    好像IE9下面不能显示圆角。

    Dispose6年前 (2011-03-30)回复
    • IE哪里给力了???

      浩子6年前 (2011-03-30)回复
  9. #3

    给力·· 学习了······· 🙂

    heson6年前 (2011-03-29)回复
  10. #2

    怎么没看到渐变啊!

    TXT小说下载6年前 (2011-03-29)回复
    • Firefox下查看

      浩子6年前 (2011-03-29)回复
      • FF5.0 看不到啊,效果和CHROME下一样,没渐变啊。

        夏星辰6年前 (2011-07-21)回复
  11. #1

    这个做出来是圆角吗?这么神奇?具体是哪个在限定其成为圆角呢?

    qixun6年前 (2011-03-29)回复
    • border-radius:20px; 是这个让它圆滴 🙂

      浩子6年前 (2011-03-29)回复
    • border-radius:20px; 😆

      zhailulu6年前 (2011-03-29)回复

themebetter 国内更好的WordPress主题服务商

立即前往