CSS3 边框图片(border-image)

最新推荐文章于 2024-07-26 08:00:00 发布

houyanhua1

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量801

点赞数

本文链接：https://blog.csdn.net/houyanhua1/article/details/79646140

版权

CSS 同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

HTML5

54 篇文章 1 订阅

订阅专栏

CSS3

33 篇文章 0 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

		.box {
			width: 300px;
			height: 300px;
			margin: 100px auto;
			border: 27px solid #000;  /* 不设置border有可能显示不出边框图片 */

			/* 设置边框图片的各种属性 */
			border-image-source: url("11.png");  /* 边框图片的路径 */
			border-image-slice: 27 27 27 27;    /* 边框图片的裁剪(裁剪出四个角),不需要单位 */
			border-image-width: 27px;
			border-image-repeat: round;   /* 平铺方式 repeat:平铺可能显示不完整 round:平铺但会自动调整 stretch:拉伸 */
		}

	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>