border-image

jasonjkj

于 2017-09-18 14:51:17 发布

阅读量556

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3

本文链接：https://blog.youkuaiyun.com/jasonjkj/article/details/78019095

CSS3 专栏收录该内容

12 篇文章

订阅专栏

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 30px solid red;
            border-image: url(img/borderBG.png) 80 100 80 round;
        }

        /*
        border-image 属性是一个简写属性，用于设置以下属性：
        border-image-source:url()
        border-image-slice:图片边框向内偏移。
        border-image-width:图片边框的宽度。
        border-image-outset:边框图像区域超出边框的量。
        border-image-repeat:图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。
        */
    </style>
</head>
<body>
<div>
    自定义边框
</div>