详解CSS border-image属性

一、border-image简介

CSS边框是一个重要的元素，可以通过它来给网站增加美观度和品质感。而在CSS中，可以通过border-image属性来设置元素的边框图片和显示方式。

border-image属性分为九部分，分别是：border-image-source（图片地址）、border-image-slice（图片切片）、border-image-width（图片宽度）、border-image-outset（图片边距）、border-image-repeat（图片重复方式）和四个缩写属性。

二、border-image源

border-image-source属性用于定义边框图片的来源，支持所有的URL值、图片资源和线性渐变。

    .border-image-source {
      border-image-source: url(border.png);
    }

或者使用线性渐变作为边框图片源：

    .border-image-source {
      border-image-source: linear-gradient(to bottom right, #4CAF50, #FF5722);
    }

三、图片切片

border-image-slice属性定义将边框图片分为九个区域以及如何调整这些区域的大小。语法如下：

    .border-image-slice {
      border-image-slice: number|[number]%;
    }

可以使用px为单位设置切片大小，同时可以通过设置百分比来调整边框图像大小：

    .border-image-slice {
      border-image-slice: 30;
      border-image-slice: 30% 20% 10% 5%;
    }

四、图片宽度

border-image-width属性定义边框图片的宽度，也可以设置百分比来调整大小并应用到每个切片。语法如下：

    .border-image-width {
      border-image-width: number|[number]%;
    }

可以分别给每个方向设置边框图片宽度：

    .border-image-width {
      border-image-width: 30;
      border-image-width: 30% 20% 10% 5%;
      /*top, right, bottom, left*/
      border-image-width: 30% 20% 10%;
      /*top, right and left, bottom*/
      border-image-width: 30% 20%;
      /*top and bottom, right and left*/
    }

五、边距

border-image-outset属性定义边框图片的超出边框线的距离，使用负值会将边框图片缩小以适应边框大小。

    .border-image-outset {
      border-image-outset: number|[number]%;
    }

不过多重叠的仍然会保持原来的形状，推荐给不同的边使用不同的值以避免这种情况。

六、重复方式

border-image-repeat属性定义如何重复边框图像。语法如下：

    .border-image-repeat {
      border-image-repeat: stretch|repeat|round;
    }

默认情况下，边框图像是在边框区域内重复，使用“stretch”值会拉伸图像以适应边缘区域。而“repeat”将按图片大小重复。

"round"会拉伸图像以适合边缘区域，并尝试在重复之前进行四舍五入缩小，以使重复之后的宽度恰好适合边缘区域。

七、CSS border-image缩写属性

除了以上的独立属性外，CSS 还提供了一种缩写属性，可以将所有单独属性合在一起。

    .border-image {
      border-image: url(border.png) 30 round;
    }

可以通过缩写属性的方式一次设置所有的属性值。

八、CSS border-radius对圆角的设置

CSS border-radius属性是用于设置元素的圆角的属性。使用border-radius属性与border-image属性可以轻松的达到各种符合设计要求的效果。

使用border-radius 设置圆角：

    .border-radius {
      border-radius: 10px;
    }

也可以多边形圆角效果：

    .border-radius {
      border-top-left-radius: 20px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 40px;
    }

九、小结

CSS border-image是一种非常实用的属性，使用它可以轻松的设置元素的边框图片、边框图案和切片等效果。除了border-image属性，border-radius属性也是一个非常实用的元素设置上圆角效果的属性。