HTML5 图片边框

边框图循环平铺(repeat);

 <div id="repeat">图片将会循环贴满边框区域</div>

#repeat { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}


边框图拉伸平铺(stretch)

<div id="stretch">图片将会拉伸贴满边框区域.</div>

#stretch { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}
posted @ 2016-08-07 21:39  xiaye  阅读(2094)  评论(0)  编辑  收藏  举报