CSS3学习第4篇——边框图片_css border图片-CSDN博客

本文链接：https://blog.csdn.net/m0_37617778/article/details/85159604

1、border-image边框图片

属性	描述	CSS
border-image	简写属性，设置所有 border-image-* 属性。	3
border-image-outset	规定边框图像区域超出边框的量。	3
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。	3
border-image-slice	规定图像边框的向内偏移。	3
border-image-source	规定用作边框的图片。	3
border-image-width	规定图片边框的宽度。	3

border-image 定义和用法

border-image 属性是一个简写属性，用于设置以下属性：

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

如果省略值，会设置其默认值。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

2、示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3 边框图片</title>
	<style type="text/css">
		div{
			width: 300px;
			height: 200px;
			background-color:blue;
			border:20px solid red;
			border-image-source: url(../images/border_image_5.png);
			border-image-slice: 19;
			/*拉伸图像来填充区域*/
			/*border-image-repeat: stretch;*/
			/*平铺（重复）图像来填充区域。可能与四个角的图像存在重合的部分*/
			/*border-image-repeat: repeat;*/
			/*如果无法完整平铺所有图像，则对图像进行缩放以适应区域。推荐使用这个值*/
			border-image-repeat: round;
			
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

使用的图片：

显示效果：