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

    border-image-source属性怎么用

    青灯夜游 青灯夜游 2019-02-12 15:04:19 原创 148
    border-image-source属性指定要使用的图像,而不是由border-style属性设置的边框样式。

    CSS3 border-image-source属性

    作用:规定要使用的图像,代替 border-style 属性中设置的边框样式。

    语法:

    border-image-source: none|image;

    none:表示不使用图像。

    image:表示用作边框的图像的路径。

    说明:如果值为 "none",或者如果图像无法显示,则使用边框样式。

    CSS3 border-image-source属性的使用示例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style> 
    div {
        border: 30px solid transparent;
        width: 200px;
        height: 50px;
        border-image-source: url('http://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');
        border-image-repeat: round;
        border-image-slice:30;
    }
    </style>
    </head>
    <body>
     
    <div>
     DIV 使用图像边框
    </div>
    </body>
    </html>

    效果图:

    1.jpg

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

    第六期线上培训班
    专题推荐: border-image-source CSS3
    上一篇:border-image-slice属性怎么用 下一篇:border-image-width属性怎么用

    相关文章推荐

    • CSS3属性 Transitions, Transforms和Animation_html/css_WEB-ITnose • 怎?停止css3属性animation,求助_html/css_WEB-ITnose • css3属性-webkit-font-smoothing_html/css_WEB-ITnose • 分享几个常用的最新的css3属性

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网