CSS 边框图像

CSS 边框图像

通过使用 CSS border-image 属性，可以设置图像用作围绕元素的边框。

CSS border-image 属性

CSS border-image 属性允许您指定要使用的图像，而不是包围普通边框。

该属性有三部分：

  • 用作边框的图像
  • 在哪里裁切图像
  • 定义中间部分应重复还是拉伸

我们将使用这幅图像（"border.png"）

border-image 属性接受图像，并将其切成九部分，就像井字游戏板。然后，将拐角放置在拐角处，并根据您的设置重复或拉伸中间部分。

注意：为了使 border-image 起作用，该元素还需要设置 border 属性！

此处，重复图像的中间部分以创建边框：

图像作为边框！

ນີ້ແມ່ນການຂຽນຈາກການທ້າທາຍ:

ຄວາມຄິດທີ່ຕັ້ງຢູ່

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

ທ້າທາຍດີຕະຫຼອດຕົວເອງ

此处，图像的中间部分被拉伸以创建边框：

图像作为边框！

ນີ້ແມ່ນການຂຽນຈາກການທ້າທາຍ:

ຄວາມຄິດທີ່ຕັ້ງຢູ່

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

ທ້າທາຍດີຕະຫຼອດຕົວເອງ

提示：border-image 属性实际上是以下属性的简写属性：

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

CSS border-image - ຈຸດການຕັດຕິງບາດ

ຈຸດການຕັດຕິງບາດຈະປ່ຽນແປງພາບບາດຢ່າງສົມບູນ:

ຄວາມຄິດທີ່ຕັ້ງຢູ່ 1:

border-image: url(border.png) 50 round;

ຄວາມຄິດທີ່ຕັ້ງຢູ່ 2:

border-image: url(border.png) 20% round;

ຄວາມຄິດທີ່ຕັ້ງຢູ່ 3:

border-image: url(border.png) 30% round;

ນີ້ແມ່ນການຂຽນຈາກການທ້າທາຍ:

ຄວາມຄິດທີ່ຕັ້ງຢູ່

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

ທ້າທາຍດີຕະຫຼອດຕົວເອງ

ການຈັດກຽມບາດພາບ CSS

ການຈັດກຽມ ການອະທິບາຍ
border-image ກົດລະບຽບການຈັດກຽມຂອງບາດ-image-*ທີ່ຫຍິງ.
border-image-source ກົດລະບຽບການໃຊ້ຮູບພາບຂອງບາດຢູ່ບໍລິເວນບາດ.
border-image-slice 规定如何裁切边框图像。
border-image-width 规定边框图像的宽度。
border-image-outset 规定边框图像区域超出边框盒的量。
border-image-repeat 规定边框图像应重复、圆角、还是拉伸。