• css3之border-color


    -moz-border-top-colors:上边框
    -moz-border-right-colors:右边框
    -moz-border-bottom-colors:下边框
    -moz-border-left-colors:左边框

    这个css是用来定义边框颜色的,可以给边框定义多种颜色,截至目前为止,仅 Firefox 支持,而且必须通过添加前缀 -moz- 才可实现

    举例:正常的边框颜色通常都只有一种,比如一个8px的边框,要么纯红的,要么纯绿的,肯定不可能一个边框上红绿交替,但通过以上四种css属性,就可以做到一条边框上有N种颜色。

    实现的方式,比如上边框:-moz-border-top-colors

    border-top:8px solid #fff;

    -moz-border-top-colors:red orange yellow green blue pink purple gray;

    这里定义的一个从上到下,颜色依次为红橙黄绿蓝粉紫灰,共8种颜色的一个边框。

    如果定义了一个8px的边框,但是我的颜色值不到8种的时候,是这么计算的:

    如果有一种颜色,则取用该色值为边框色;

    如果有两种颜色,则从外至内,位于第1位的色值占用1px的边框,剩下的7px边框全采用位于第2位的色值;

    如果有三种颜色,则从外至内,位于第1位的色值占用1px的边框,位于第二位的色值占用1px的边框,剩下的6px全采用位于第3位的色值;

    依此类推......

    如果有七种颜色,从外至内,位于前6位的色值各占用1px的边框,位于第7位的色值占用剩下的2px边框

    如果有八种颜色,则每种色值各占用1px的边框。

    下面是一个案例:

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>border-color</title>
            <style>
    	    *{margin:0; padding:0;}
    	    body{background-color:#000; color:#fff;}
    	    div {
             200px;
             height:100px; margin:50px; padding:10px; border: 8px solid #fff; -moz-border-top-colors:red orange yellow green blue pink purple gray; -moz-border-right-colors:red orange yellow green blue pink purple gray; -moz-border-bottom-colors:red orange yellow green blue pink purple gray; -moz-border-left-colors:red orange yellow green blue pink purple gray;
    } </style> </head> <body> <div>看我的边框效果</div> </body> </html>

     效果图:

  • 相关阅读:
    react redux 使用
    github 退出和别人共同开发的仓库
    在react package.json中配置代理解决跨域
    禁止浏览器sources下webpack文件 显示源码
    redux connect 装饰器配置和安装
    Odoo 在action的domain和context中使用self.env
    odoo 字段后面添加button按钮,页签tree再加group显示字段
    Odoo -- 开发者模式创建的群组、动作没有xml id怎么办
    Mac必备神器Homebrew mac下镜像飞速安装Homebrew教程
    Vue -- keyup、watch、computed、nrm的安装
  • 原文地址:https://www.cnblogs.com/lpbottle/p/borderColor.html
Copyright © 2020-2023  润新知