border-image-slice 中的垂直方向，水平方向

为了更好地理解 border-image-slice: 10% 30%; 的含义，下面是一个示例图示：

假设我们有一个边框图像，如下所示：

+---------------------+
|         A           |
|    +---------+      |
|    |         |      |
|  B |   C     |  D   |
|    |         |      |
|    +---------+      |
|         E           |
+---------------------+

假设这张图像的尺寸为 100px x 100px，那么：

• 10% 的垂直方向切片意味着从图像的顶部和底部分别切下 10px（即 100px 的 10%）。
• 30% 的水平方向切片意味着从图像的左侧和右侧分别切下 30px（即 100px 的 30%）。

根据这些切片值，图像将被划分为九个部分，如下所示：

+--10%--+-------------------------+--10%--+
|       |                         |       |
|       |           A             |       |
|       |                         |       |
+-------+-------------------------+-------+
|       |                         |       |
|       |                         |       |
|  30%  |           C             |  30%  |
|       |                         |       |
|       |                         |       |
+-------+-------------------------+-------+
|       |                         |       |
|       |           E             |       |
|       |                         |       |
+--10%--+-------------------------+--10%--+

最终，图像的四个角（A、B、D、E）将用于元素的四个角，四条边（顶部、底部、左侧、右侧）将平铺或拉伸至元素的四条边，中间区域（C）将用于元素的内容区域。

这样，通过 border-image-slice，你可以指定图像的哪些部分用于边框的哪些部分。