border-image CSS属性允许在元素的边框上绘制图像。。这使得绘制复杂的外观组件更加简单，使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式

默认值：              不可继承
   border-image-source: none
   border-image-slice: 100%
   border-image-width: 1
   border-image-outset: none
   border-image-repeat: stretch

使用border-image必须要有border属性

border-image-source 属性定义使用一张图片来代替边框样式；如果只为none，则仍然使用border-style 定义的样式。

默认值：none 不可继承

border-image-slice 属性会通过规范将 border-image-source 的图片明确的分割为9个区域：四个角，四边以及中心区域。
并可指定偏移量
默认值：100% 不可继承

值得百分比参照于image本身！！

可选值:

　　fill: 相当于是把图片的中心区域取下来填充到内容区,可以作为背景图来使用

border-image-repeat 定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

默认值：stretch  不可继承

值：
   stretch （拉伸）
   repeat，round（平铺）

border-image-width 定义图像边框宽度。
默认值：1 不可继承

border-image-outset属性定义边框图像可超出边框盒的大小

默认值：0 不可继承

正值：可超出边框盒的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 500px;
            width: 500px;
            border: 30px solid;
            border-image-source: url(./img/border-image.png);
            border-image-slice: 33.33333% fill;
            border-image-repeat:round;
            border-image-width: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

posted on 2021-07-06 15:37 leiyanting 阅读(142) 评论(0) 收藏举报

刷新页面返回顶部

导航