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

转载于:https://www.cnblogs.com/223y/p/5747393.html