CSS 边框图像

CSS 边框图像

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

CSS border-image 属性

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

该属性有三部分:

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

我们将使用这幅图像(”border.png”)

border.png

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

注意:为了使 border-image 起作用,该元素还需要设置 border 属性!

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

css3_border-image_1.htm

这是代码:

实例

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

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

css3_border-image_2.htm

这是代码:

实例

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

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

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

CSS border-image - 不同的裁切值

不同的裁切值会完全改变边框的外观:

css3_border-image_3.htm

这是代码:

实例

  1. #borderimg1 {
  2. border: 10px solid transparent;
  3. padding: 15px;
  4. border-image: url(border.png) 50 round;
  5. }
  6. #borderimg2 {
  7. border: 10px solid transparent;
  8. padding: 15px;
  9. border-image: url(border.png) 20% round;
  10. }
  11. #borderimg3 {
  12. border: 10px solid transparent;
  13. padding: 15px;
  14. border-image: url(border.png) 30% round;
  15. }

CSS 边框图像属性

属性 描述
border-image 用于设置所有 border-image-* 属性的简写属性。
border-image-source 规定用作边框的图像的路径。
border-image-slice 规定如何裁切边框图像。
border-image-width 规定边框图像的宽度。
border-image-outset 规定边框图像区域超出边框盒的量。
border-image-repeat 规定边框图像应重复、圆角、还是拉伸。