<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>shi</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 #9eaab6;
padding: 5px;
border-image: url("border-image-tab.png") 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);
}
.border-image-drop-boxshadow {
width: 150px;
height: 50px;
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
border-width: 7px 7px 16px;
border-image: url("border-image-box-shadow.png") 7 7 16 7;
}
.box2 {
width: 200px;
height: 100px;
}
.border-radius {
width: 250px;
height: 100px;
border: 10px solid orange;
border-width: 20px 5px 30px 60px;
border-radius: 100px;
border-color: orange red green blue;
}
img-shadow {
display: inline-block;
box-shadow: inset 5px 5px 10px #06c;
}
img {
position: relative;
z-index: -1;
vertical-align: top;
}
.box-shadow {
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
box-shadow: inset 3px 3px 10px blue, 5px 0 5px green;
}
.top {
box-shadow: 0 -2px 5px -3px red;
}
.right {
box-shadow: 2px 0 5px -3px green;
}
.bottom {
box-shadow: 0 2px 5px -3px blue;
}
.left {
box-shadow: -2px 0 5px -3px orange;
}
#formWrapper {
width: 450px;
padding: 8px;
margin: 20px;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede;
box-shadow: 0 3px 3px rgba(255,255,255,.1),
0 3px 0 #bbb, 0 4px 0 #aaa,
0 5px 5px #444;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left, bottom, from(#f6f6f6), to(#eae8e8));
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
#formWrapper .search {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
}
</style>
</head>
<body>
<ul class="tabs-box">
<li>home</li>
<li>CSS3</li>
<li>Html5</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<div class="border-image-drop-boxshadow box1">小框</div>
<div class="border-image-drop-boxshadow box2">大框</div>
<div class="border-radius"></div>
<form id="formWrapper">
<div class="formFiled clearfix">
<input type="text" required="" placeholder="Search" class="search">
<input type="submit" class="btn submit" value="go">
</div>
</form>
<div class="img-shadow">
<img src="border.jpg" alt="" width="150" height="150" />
</div>
<div class="box-shadow"></div>
<div class="box-shadow top"></div>
<div class="box-shadow right"></div>
<div class="box-shadow bottom"></div>
<div class="box-shadow left"></div>
</body>
</html>