一、理论:
1.注意制作边框的图片的高与宽
2.边框宽度配合到位
3.切割边框背景图片合理
二、实践:
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.border-image-btn{
display: inline-block;
border: 18px solid green;
border-width: 0 18px;
border-image: url("images/round-box1.jpg") 0 18 50 18;
-webkit-border-image: url("images/round-box-2.jpg") 0 18 50 18;
-moz-border-image: url("images/round-box1.jpg") 0 18 50 18;
-o-border-image: url("images/round-box1.jpg") 0 18 50 18;
-moz-border-image: url("images/round-box1.jpg") 0 18 50 18;
padding: 13px 10px 17px;
font-size: 16px;
color: #fff;
font-weight: bold;
text-decoration: none;
line-height: 15px;
margin: 10px;
}
.border-image-btn:hover{
-webkit-border-image: url("images/round-box1.jpg") 0 18 50 18;
-moz-border-image: url("images/round-box1.jpg") 0 18 50 18;
-o-border-image: url("images/round-box1.jpg") 0 18 50 18;
-moz-border-image: url("images/round-box1.jpg") 0 18 50 18;
color:#000;
border-color: chartreuse;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#" class="border-image-btn">click me~</a>
<a href="#" class="border-image-btn">click me~click me~</a>
<a href="#" class="border-image-btn">click me~click me~click me~</a>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.tabs-box{
border-bottom: 3px solid #9eaab6;
margin: 0;
padding: 0;
overflow: hidden;
zoom: 1;
}
.tabs-box li{
float: left;
display: inline;
margin: 0 12px 0 0;
list-style: none outside none;
border: 1px solid #990099;
padding: 5px;
border-image: url("images/tabs-image.jpg") 0 5 0 5;
-moz-border-image: url("images/tabs-image.jpg") 0 5 0 5;
-webkit-border-image: url("images/tabs-image.jpg") 0 5 0 5;
-o-border-image: url("images/tabs-image.jpg") 0 5 0 5;
-ms-border-image: url("images/tabs-image.jpg") 0 5 0 5;
border-width: 0 5px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
color:rgba(0,125,200,0.3);
}
</style>
</head>
<body>
<ul class="tabs-box">
<li>Home</li>
<li>css</li>
<li>html</li>
<li>Javascript</li>
<li>jQuery</li>
</ul>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.border-image-drop-boxshadow{
width: 150px;
height: 50px;
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
border-width: 7px 7px 16px;
border-image: url("images/border-background.gif") 7px 7px 16px 7px;
-moz-border-image: url("images/border-background.gif") 7px 7px 16px 7px;
-webkit-border-image: url("images/border-background.gif") 7px 7px 16px 7px;
-o-border-image: url("images/border-background.gif") 7px 7px 16px 7px;
-ms-border-image: url("images/border-background.gif") 7px 7px 16px 7px;
}
.box1{
width: 100px;
height: 50px;
}
.box2{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="border-image-drop-boxshadow box1">small</div>
<div class="border-image-drop-boxshadow box2">big</div>
</body>
</html>