CSS: border-image实用的属性

CSS: border-image 属性

1. 前提场景

当一张图片被设置为几个不同尺寸的元素，用作背景图时。设置backgroud-image和background-size 并不能达到想要的效果。会将图片压缩或者拉伸。

background-image:url(xxx/xxx.png);
background-size: 100% 100%;

图片出现拉伸，达不到想要的效果。
使用border-image可以解决这个问题。

  border: 30px solid #fff;
  border-image-source: url(xxx/xxx.png);
  border-image-slice: 100 235 100 235;
  border-image-width: 100px 220px 100px 220px;
  border-image-repeat: round;

2. border-image

1. 定义
   border-image CSS 属性在给定元素的周围绘制图像，取代元素的常规边框。（MDN)
2. 示例(取自MDN)

border-image: url('/media/examples/border-diamonds.png') 30;
border-image: url('/media/examples/border-diamonds.png') 30 / 19px round;
border-image: url('/media/examples/border-diamonds.png') 30 fill / 30px / 30px space;
border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px) 60;

图片顺序从左到右，从上到下。

3. boder-image五个属性的简写

border-image-outset、border-image-repeat、border-image-slice、border-image-source、border-image-width

1. border-image-outset
   属性定义边框图像可超出边框盒的大小。值设置方法和padding、magin一致。

/* 上 | 右 | 下 | 左 */
border-image-outset: 7px 12px 14px 5px;

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

/* 关键字值 */
border-image-repeat: stretch;	//拉伸图片以填充边框
border-image-repeat: repeat;	//平铺图片以填充边框
border-image-repeat: round;		//平铺图像。当不能整数次平铺时，根据情况放大或缩小图像
border-image-repeat: space;		//平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）

/* 上、下 | 左、右 */
border-image-repeat: round stretch;

3. border-image-slice
   CSS 属性将使用 border-image-source 引用的图像划分为多个区域。这些区域组成了一个元素的边框图像。
   切分过程会将图像分割为 9 个区域：四个角、四个边（edge）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。

• 区域 1-4 为角区域（corner region）。每一个都被用于组成最终边框图像的四个角。
• 区域 5-8 边区域（edge region）。在最终的边框图像中重复、缩放或修改它们以匹配元素的大小。
• 区域 9 为中心区域（middle region）。它在默认情况下会被丢弃，但如果设置了关键字 fill，则会将其用作元素的背景图像。

/* All sides */
border-image-slice: 30%;

/* vertical | horizontal */
border-image-slice: 10% 30%;

/* top | horizontal | bottom */
border-image-slice: 30 30% 45;

/* top | right | bottom | left */
border-image-slice: 7 12 14 5;

/* Using the `fill` keyword */
border-image-slice: 10% fill 7 12;

/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: revert;
border-image-slice: revert-layer;
border-image-slice: unset;

border-image-slice 属性可以用四个指定的 值来表示每一个图像切片的位置。负数是无效的，而大于其相应的最大尺寸的值则会被限制为 100%。

• 仅指定了一个位置（1 个值）时，创建的（上下左右）四个切片将具有相同的宽度/高度。
• 当指定了两个位置（2 个值）时，第一个值表示垂直方向的两个切片的高度（即 top 与 bottom），第二个值表示水平方向两侧切片的宽度（即 left 和 right）。
• 当指定了三个位置（3 个值）时，第一个值表示顶部切片的高度（即 top），第二个值表示水平方向两侧切片的宽度（即 left 和 right），第三个值则表示底部切片的高度（即 bottom）。
• 当指定了四个位置（4 个值）时，这四个值则分别对应 top、right、bottom、left（上、右、下、左）四个切片的宽度/高度。

4. border-image-source
   CSS 属性设置用以创建元素边框图像的源图像。

/* 关键字值 */
border-image-source: none;   //不使用边框图像，而由 border-style 定义所展现的外观

/*  值 */
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

5. border-image-width 指定了 边界图像 (border image) 的宽度

/* 关键字 */
border-image-width: auto;
/* 长度 */
border-image-width: 1rem;
/* 百分比 */
border-image-width: 25%;
/* 数值 */
border-image-width: 3;
/* 垂直 | 水平 */
border-image-width: 2em 3em;
/* 上 | 横向 | 下 */
border-image-width: 5% 15% 10%;
/* 上 | 右 | 下 | 左 */
border-image-width: 5% 2em 10% auto;

• 当指定 一个 值时，它将作用到 四个方向 ；
• 当指定 两个 值时，它将分别作用到 垂直方向 和 水平方向 ；

合理使用border-imge可以达到一张背景图适用不同尺寸的效果。