• 技术文章 >web前端 >前端问答

    css column-rule-color属性怎么用

    青灯夜游青灯夜游2019-05-29 10:24:55原创1062
    css column-rule-color属性指定元素分列显示时,列与列之间分隔线的颜色规则。注:要先设置好列之间的样式规则,颜色规则才能生效。

    css column-rule-color属性怎么用?

    column-rule-color属性规定列之间的颜色规则。

    语法:

    column-rule-color: color;

    属性值:

    ● color:规定颜色规则。

    注释:

    Internet Explorer 10 和 Opera 支持 column-rule-color 属性。Firefox 支持替代的 -moz-column-rule-color 属性。Safari 和 Chrome 支持替代的 -webkit-column-rule-color 属性。Internet Explorer 9 以及更早版本的浏览器不支持 column-rule-color 属性。

    css column-rule-color属性 示例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <style> 
    .newspaper
    {
    column-count:3;
    column-gap:40px;
    column-rule-style:outset;
    column-rule-color:#ff0000;
    /* Firefox */
    -moz-column-count:3;
    -moz-column-gap:40px;
    -moz-column-rule-style:outset;
    -moz-column-rule-color:#ff0000;
    /* Safari and Chrome */
    -webkit-column-count:3;
    -webkit-column-gap:40px;
    -webkit-column-rule-style:outset;
    -webkit-column-rule-color:#ff0000;
    }
    </style>
    </head>
    <body>
    <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
    <div class="newspaper">
    当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。
    </div>
    </body>
    </html>

    效果图:

    1.jpg

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

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

    相关文章推荐

    • css column-count属性怎么用• css backface-visibility属性怎么用• css counter-increment属性怎么用• css column-rule属性怎么用

    全部评论我要评论

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

    PHP中文网