.all{
width: 100px;
height: 60px;
background: red url("images/border/nav-center.jpg") repeat-
x;
//图片为宽度为1px
margin: 200px auto;
}
.left{
width: 100%
;
height: 100%
;
background: url("images/border/nav-left.jpg") no-
repeat;
}
.right{
width: 100%
;
height: 100%
;
background: url("images/border/nav-right.jpg") center right no-
repeat; //背景定位
}
<div class="all">
<div class="left">
<div class="right"></div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>125-边框图片按钮</title>
<style>
*
{
margin: 0
;
padding: 0
;
}
div{
width: 100px;
height: 60px;
border: 20px solid #000
;
box-sizing: border-
box;
border-image: url("images/border/nav-all.jpg") 20
fill repeat;
margin: 200px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
转载于:https://www.cnblogs.com/zhangzhengyang/p/11100296.html
相关资源：一个基于Ajax+CSS技术实现的网页导航滑动门特效（点击式）程序例子
