• 技术文章 >web前端 >css教程

    css border-color属性怎么用?

    青灯夜游青灯夜游2020-09-08 11:09:59原创2232
    border-color属性是一个简写属性,可用于设置一个元素的所有四条边框的颜色,或者为4个边分别设置不同的颜色。

    CSS border-color属性

    作用:border-color属性用于设置一个元素边框颜色,可以设置1~4个值:

    border-color:red green blue pink;

     ● 上边框是红色

     ● 右边框是绿色

     ● 下边框是蓝色

     ● 左边框是粉红色

    border-color:red green blue ;

     ● 上边框是红色

     ● 左,右边框是绿色

     ● 下边框是蓝色

    border-color:red green;

     ● 上、下边框为红色

     ● 左、右边框为绿色

    border-color:red;

     ● 所有四个边框都为红色

    注:需要在 border-color属性之前声明border-style 属性的,因为元素必须在改变其颜色之前获得边框。且border-style 属性的值不能为 none 或 hidden,否则边框不会出现,border-color属性无法生效。

    CSS border-color属性的使用示例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>php中文网(php.cn)</title> 
    <style type="text/css">
    p.one
    {
    border-style: solid;
    border-color: #0000ff
    }
    p.two
    {
    border-style: solid;
    border-color: #ff0000 #0000ff
    }
    p.three
    {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff
    }
    p.four
    {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
    }
    </style>
    </head>
    <body>
    <p class="one">一个蓝色边框!</p>
    <p class="two">一个彩色边框!</p>
    <p class="three">一个彩色边框!</p>
    <p class="four">一个彩色边框!</p>
    <p><b>注:</b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
    </body>
    </html>

    效果图:

    1.jpg

    以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

    以上就是css border-color属性怎么用?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:border-color属性 CSS
    上一篇:css3 nav-right属性怎么用? 下一篇:css outline属性怎么用?
    PHP编程就业班

    相关文章推荐

    • CSS3教程(3):border-color网页边框色彩_css3_CSS_网页制• 总结css边框实现各种效果的方法• 浅析CSS边框属性:宽度&样式&边框等• 如何实现多色边框,border-colors属性详解

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网