第23章 CSS3边框图片效果

最新推荐文章于 2020-12-29 01:21:52 发布

iteye_17658

最新推荐文章于 2020-12-29 01:21:52 发布

阅读量142

点赞数

分类专栏：阅-H5

阅-H5 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS3边框图片效果</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div>我是HTML5</div>

</body>
</html>

style.css

@charset "utf-8";

div {
	width: 400px;
	height: 400px;
	/*background:green;*/
/*	border-image-source: url(border.png);
	border-image-width: 27px;
	border-image-slice: 27;
	border-image-repeat: round;*/
	/*border-image-repeat: space;*/
	/*border-image-repeat: round;*/
	/*border-image-repeat: repeat;*/
	/*border-image-repeat: stretch;*/


	/*border-image-outset: 27px;*/
	/*border-image-slice: 0 fill;*/
	/*border-image-slice: 81;*/
	/*border-width: 81px;*/

/*	border-image-source: url(button.png);
	border-image-width: 10px;
	border-image-slice: 10 fill;*/
	
	border-image: url(border.png) 27/27px round;
}

效果图：