border-image 属性的各个参数

技术 阅读需时: ~1 分钟
文章目录
  1. border-image-source
  2. border-image-slice
  3. border-image-width
  4. border-image-outset
  5. border-image-repeat

border-image-source

指定边框图案的路径，可以是一个 URL，也可以是一个线性渐变或径向渐变等 CSS 图像。例如：

border-image-source: url(border.png);
border-image-source: linear-gradient(red, blue);

border-image-slice

指定如何分割边框图案，以确定边框图案的哪些部分应该被拉伸，哪些部分应该被重复。语法如下：

border-image-slice: 〈number | percentage | fill | initial | inherit〉{1,4} /* {1,4}指可以接受1到4个值 */

其中，每个长度值表示边框图案被分割后的一段，数字表示像素数，百分比表示边框图案宽度的百分比， fill 表示自动填充，即如果边框图案不够长，将自动拉伸或重复图案以填充边框。如果只提供一个值，表示所有四个边都采用相同的分割方式；如果提供两个值，表示水平和垂直方向采用不同的分割方式；如果提供四个值，分别表示上、右、下、左四个方向的分割方式。 请注意，当 border-image-repeat 为 stretch 时， border-image-slice 不会产生任何效果。

border-image-width

指定边框的宽度。可以是一个像素单位的长度值、可缩放的长度值（例如 em 或 % ），也可以是关键字 auto 。如果是关键字 auto ，则边框宽度将与边框图案的实际大小相匹配。例如：

border-image-width: 10px; /* 四个边都相同 */
border-image-width: 10px 20px; /* 上下边相同，左右边相同 */
border-image-width: 10px 20px 30px; /* 上下左右三个边分别指定 */
border-image-width: 10px 20px 30px 40px; /* 上右下左四个边分别指定 */
border-image-width: auto; /* 自适应边框图案大小 */

border-image-outset

指定边框图案的偏移量（即边框宽度扩展的距离）。可以是一个像素单位的长度值、可缩放的长度值（例如 em 或 % ），也可以是关键字 auto 。如果是 auto ，则偏移量将被设置为零。如果只提供一个值，则所有四个边都采用相同的偏移量。例如：

border-image-outset: 10px; /* 四个边都相同 */
border-image-outset: 10px 20px; /* 上下边相同，左右边相同 */
border-image-outset: 10px 20px 30px; /* 上下左右三个边分别指定 */
border-image-outset: 10px 20px 30px 40px; /* 上右下左四个边分别指定 */
border-image-outset: auto; /* 自适应偏移量 */

border-image-repeat

指定边框图案的重复方式。可以是一个关键字，也可以是一个由两个关键字组成的值对。如果是一个关键字，表示所有四个边都采用相同的重复方式；如果是一个值对，表示左右两个边采用第一个关键字，上下两个边采用第二个关键字。可选值包括：

  • stretch ：拉伸边框图案以填充整个边框
  • repeat ：重复边框图案以填充整个边框
  • round ：按比例放大或缩小边框图案，使得每个单元格都完全填充该单元格所在的边框 例如：
border-image-repeat: stretch; /* 四个边都相同 */
border-image-repeat: repeat round; /* 左右边采用 repeat，上下边采用 round */

以上就是 border-image 属性的各个参数及其用法的详细介绍。