《前端学习》-css之border-image记录

border-image : 设置图像用作围绕元素的边框，必须要先设置border属性才能起作用。

border-image的三大部分：

1、用作边框的图像：border-image-source属性；

     定义：规定边框使用的图像，代替border-style属性中设置的边框样式，如果值为“none”,或者图像无法显示，则使用border-style设置的边框样式，可使用绝对路径与相对路径，例：

  

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

2、在哪里裁切图片：border-image-slice属性；

        定义：规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域，除非使用了关键字fill，否则中间的图像会被丢弃。

       属性值：属性值可以是数值、百分数、fill关键字，属性值不能带单位。如果是数值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像），默认单位是px。如果是百分数，表示相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移，可以使用图像的宽度和高度分别乘以对应的数值来换算为具体的数值后进行截取。

        属性值可以是1-4个数，数值为1个时表示四边偏移量相同；数值为2个时，第1个数据表示上、下侧边缘的向内偏移