border-image

border-image属性用于设置边框图像的，它是一个用于同时设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值，省略的值设置为它们的默认值。

前端控更新时间：2019-03-23 11:01:52

具体内容
相关视频
相关知识
最新评论

border-image属性

含义：

border-image属性是速记属性，用于同时设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值，省略的值设置为它们的默认值。

浏览器支持：

表格中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性
border-image	11.0	16.0 4.0 -webkit-	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

CSS3语法：

border-image：source slice width outset repeat|initial|inherit;

属性值：

值	描述
border-image-source	指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	指定在边框外部绘制 border-image-area 的量
border-image-repeat	设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	p{
	border:15px solid;
	padding: 30px;
	border-image:url(images/kuang.jpg) 42 round;
	-webkit-border-image:url(images/kuang.jpg) 42 round;
	-moz-border-image:url(images/kuang.jpg) 42 round;
	}
</style>
</head>
<body>
<p>HTML中文网</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

推荐手册

border-image

实例