当前位置:首页 > WEB开发 > HTML/CSS

第23章 CSS3框子图片效果

优良自学吧提供第23章 CSS3框子图片效果,第23章 CSS3边框图片效果 index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS3边框图片效果

第23章 CSS3边框图片效果

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

 

效果图:
第23章 CSS3框子图片效果
 

 


(本文来自互联网,不代表搜站(http://www.ylzx8.cn/)的观点和立场)
本站所有内容来自互联网,若本站收录的信息无意侵犯了贵司版权,请给我们来信(ylzx8cn@163.com),我们会及时处理和回复,谢谢