第23章 CSS3边框图片效果

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

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

阅-H5 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一种使用CSS3实现的边框图片效果。通过设置div元素的宽高，并利用border-image属性来指定边框的图片源、宽度、切片方式及重复模式等，可以轻松实现美观且灵活的边框效果。

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;
}

效果图：