• CSS3之border-color属性


    1、border-color

    (1)border-top-color:边框上部颜色

    (2)border-bottom-color:边框下部颜色

    (3)border-left-color:边框左部颜色

    (4)border-right-color:边框右部颜色

    2、浏览器兼容性

    (1)IE6、7、8不兼容

    (2)火狐2.0不兼容

    (3)Chrome 1.0和2.0不兼容

    3、属性举例

    <!DOCTYPE html>
    <!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
    -->
    <html>
        <head>
            <title>CSS 3 border-color属性</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width">
            <style type="text/css">
                body{
                    50%;
                    height:100%;
                    font-size:20px;
                    text-align:center;
                }
                #body_div{
                    border:10px solid #FF0000;
                    border-top-color:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                    border-right-color:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                    border-bottom-color:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                    border-left-color:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                    -moz-border-top-colors:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                    -moz-border-right-colors:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                    -moz-border-bottom-colors:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                    -moz-border-left-colors:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                }
            </style>
        </head>
        <body>
            <div id="body_div">CSS 3 border-color属性</div>
        </body>
    </html>
    
    4、实例效果图



  • 相关阅读:
    繁忙的都市 最小生成树 入门题
    洛谷P2801 教主的魔法 分块
    洛谷 P3203 [HNOI2010]弹飞绵羊 分块
    洛谷P2607 [ZJOI2008]骑士 基环树动归
    Hdu 2586 树链剖分求LCA
    洛谷 P3384 【模板】树链剖分
    洛谷P1816 忠诚 分块
    最全前端开发面试问题及答案整理
    CSS垂直居中和水平居中
    实现一个图片懒加载插件有多难?
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315479.html
Copyright © 2020-2023  润新知