如何在 CSS 中切片由 border-image-source 指定的图像？

CSS 中的 border-image-source 属性可以让我们指定一个图像作为边框，它比传统的 border 属性更加灵活。

但是，有时候我们需要对这个图像做一些切片或者裁剪的操作，以便达到更好的效果。那么如何在 CSS 中实现呢？

切片 border-image-source 指定的图像

我们可以使用 CSS 的 border-image-slice 属性来指定如何切片我们使用的边框图像。

border-image-slice 属性的语法如下：

border-image-slice: number|%|fill;

其中，number 表示切片的长度，可以使用百分比或者具体的数值。如果使用百分比，则相对于整个图像的长度来计算。如果使用数值，则表示具体的像素值。

fill 表示填充的值，取值可以是 auto，表示使用默认值，也可以是一个颜色值。

举个例子，如果我们想要将边框图像上下各切片 50 像素，左右各切片 20 像素，代码如下：

border-image-slice: 50 20;

值得注意的是，如果边框图像是九宫格类型，即中间部分可以自动拉伸，那么切片的值要特别小心，以免影响边框的正确显示。

裁剪 border-image-source 指定的图像

如果我们只想使用边框图像的一部分，可以使用 CSS 的 border-image-slice 和 border-image-width 属性来实现。

border-image-slice 属性用来指定要使用哪一部分的图像，border-image-width 属性用来指定边框的宽度，示例如下：

border-image-source: url(border.png);
border-image-width: 30px;
border-image-slice: 40 30 30;

这段代码的意思是，使用 border.png 这个图像作为边框，边框的宽度为 30 像素。其中，border-image-slice 的值为 40 30 30，表示只使用边框图像的上下部分，并从每个角开始削减 30 像素的宽度。

总结

通过使用 CSS 的 border-image-slice 和 border-image-width 属性，我们可以轻松地切片和裁剪 border-image-source 指定的图像，从而实现更加灵活、多样化的边框效果。