CSS - border-image 属性_CSS 菜鸟教程

此属性允许您将图像添加为元素周围的边框。默认值为 none 100% 1 0 stretch。

border-image 是以下内容的简写属性：

可能的值

border-image-source - 它指定要设置为边框的图像的路径。
border-image-slice - 它指定如何对要设置为边框的图像进行切片。
border-image-width - 它指定要设置为边框的图像的宽度。
border-image-outset - 它指定边框图像区域超出边框的程度。
border-image-repeat − 它指定是否重复图像以填充边框。
initial − 它设置属性的默认值。
inherit - 它从父元素继承属性。

适用于

所有 HTML 元素。

DOM 语法

object.style.borderImage="url(image) 30 round"

例

以下示例显示了此属性的效果 -

<html>
<head>
	 	<style>
	 	.box {
	 	 	 	 	 	 border: 10px solid transparent;
	 	 	 	 	 	 padding: 15px;
	 	 	 	 	 	 border-image: url(images/border.png) 30 stretch;
	 	 	 	 }
	 	</style>
</head>
<body>
	 	 	 	 <div class="box"></div>
</body>
</html>

<< CSS - border-end-start-radius 属性 CSS - border-image-outset 属性 >>