<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#stretch {
border: 15px solid transparent;
width: 300px;
border-image-source: url(img/isux.png);
border-image-slice: 20%;
border-width: 10px;
border-image-repeat: round;
/* round repeat Stretch*/
}
.border-image-btn {
border: 18px solid green;
border-width: 0 18px;
-webkit-border-image: url("img/button_sprite.png") 0 18 50 18;
-moz-border-image: url("img/button_sprite.png") 0 18 50 18;
-o-border-image: url("img/button_sprite.png") 0 18 50 18;
border-image: url("img/button_sprite.png") 0 18 50 18;
padding: 13px 10px 17px;
font-size: 16px;
color: #fff;
font-weight: bold;
text-decoration: none;
line-height: 15px;
}
.border-image-btn:hover {
-webkit-border-image: url("img/button_sprite.png") 50 18 0 18;
-moz-border-image: url("img/button_sprite.png) 50 18 0 18;
-o-border-image: url("img/button_sprite.png") 50 18 0 18;
border-image: url("img/button_sprite.png") 50 18 0 18;
color: #000;
border-color: yellow;
text-decoration: none;
}
</style>
</head>
<body>
<input type="button" name="" id="" class="border-image-btn" value="测 试" />
<div id="stretch">
asd
</div>
</body>
</html>
原文：http://www.cnblogs.com/lgjc/p/6442453.html