手册
目录
通过使用 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-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat不同的裁切值会完全改变边框的外观:
这是代码:
#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;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
| 属性 | 描述 | 
|---|---|
| border-image | 用于设置所有 border-image-* 属性的简写属性。 | 
| border-image-source | 规定用作边框的图像的路径。 | 
| border-image-slice | 规定如何裁切边框图像。 | 
| border-image-width | 规定边框图像的宽度。 | 
| border-image-outset | 规定边框图像区域超出边框盒的量。 | 
| border-image-repeat | 规定边框图像应重复、圆角、还是拉伸。 | 
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
精选课程
							
							共5课时
17.2万人学习
							
							共49课时
77万人学习
							
							共29课时
61.7万人学习
							
							共25课时
39.3万人学习
							
							共43课时
70.9万人学习
							
							共25课时
61.6万人学习
							
							共22课时
23万人学习
							
							共28课时
33.9万人学习
							
							共89课时
125万人学习