为了更好地理解 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
,你可以指定图像的哪些部分用于边框的哪些部分。