CSS 基础学习-242 css 拉伸边框图像border-image 属性

由 hrs, 8 九月, 2023

实例代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>border-imgage属性</title>
		<style>
			.p-border{
				border:13px solid transparent;
				width:500px;
				padding:10px;
				border-image:url(img/border-3.png) 30 stretch;

			}
		</style>
	</head>
	<body>
		<h1>border-image 属性</h1>
		<p>此处，图像的中间部分被拉伸以创建边框：</p>
		<p class="p-border">border-image:url(img/border.png) 30 round;</p>
		<p>这是原始图像</p>
		<img src="img/border-3.png" ></img>
		<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持border-image属性</p>

	</body>
</html>

运行效果：

标签

评论