HTML5系列代码:图像显示方式

  • border-image-source 用在边框的图片的路径。
  • border-image-slice 图片边框向内偏移。
  • border-image-width 图片边框的宽度。
  • border-image-outset 边框图像区域超出边框的量。
  • border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>图像显示方式</title>
<style type="text/css">
div {
	width:200px;
	height:80px;
	-webkit-border-image:url(../images/borderimage.png) 30/30px repeat;   /* 兼容webkit内核 */
	-moz-border-image:url(../images/borderimage.png) 30/30px repeat;     /* 兼容gecko内核 */
	-o-border-image:url(../images/borderimage.png) 30/30px repeat;        /* 兼容presto内核 */
	border-image:url(../images/borderimage.png) 30/30px repeat;          /* 标准用法 */
}
</style>
<body>
<div></div>
</body>
</html>

你可能感兴趣的:(HTML5)