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

此属性指定如何使用属性 border-image-source 对设置为边框的图像进行切片。

图像被切成九个部分，即四个角、四个边缘和一个中间部分。中间部分是透明的，除非使用 fill 关键字。

可能的值

number - 它表示光栅图像的像素或矢量图像的坐标。
percentage (%) − 它与边框图像的高度和宽度有关。
fill - 它导致中间部分的显示。
initial − 它设置属性的默认值。
inherit - 它从父元素继承属性。

适用于

所有 HTML 元素。

DOM 语法


object.style.borderImageSlice = "30%";

例

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


<html>
<head>
	 	<style>
	 	.box {
	 	 	 	 	 	 width: 200px;
	 	 	 	 	 	 height: 200px;
	 	 	 	 	 	 border: 20px solid;
	 	 	 	 	 	 border-image-source: url(images/border.png);
	 	 	 	 	 	 border-image-width: 15px;
	 	 	 	 	 	 border-image-slice: 33%;
	 	 	 	 	 	 border-image-outset: 8px;
	 	 	 	 }
	 	</style>
</head>
<body>
	 	 	 	 <div class="box"></div>
</body>
</html>

<< CSS - border-image-repeat 属性 CSS - border-image-source 属性 >>