CSS 设计经典－－－滑动门 Sliding Doors
看了css,原来以为没啥技术含量，狂背就成了，现在才发现，背是不行地……最起码光背是不行地，看到这个被css设计师们称为“滑动门”的设计，……，有点意思。
需求是有不同长度的按钮，却要求同一种背景
……要是图片缩放的话，圆角是会变形地……
所以应该先把图片切成两部分
和 
，然后呢……
<style type="text/css"><!--
ul.mainNav {
border-bottom: 2px solid #506BB1;
margin: 20px;
padding-left: 20px;
float: left;
width: 100%;
}
.mainNav li {
list-style: none;
float: left;
background: #FFF url(http://pic002.cnblogs.com/img/amboyna/200902/2009020311550910.png) no-repeat right top;
margin-right: 5px;
}
.mainNav a {
display: block;
padding: 7px 15px 4px 15px;
background-image: url(http://pic002.cnblogs.com/img/amboyna/200902/2009020311545631.png);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
text-decoration: none;
color: #FFF;
font-weight: bold;
font-size: 1.2em;
text-transform: uppercase;
}
.mainNav a:hover {
color:#F90;
}
--></style>
</p>
<ul class="mainNav">
<li><a href="#">Home</a></li>
<li><a href="#">很长也没问题的啊</a></li>
<li><a href="#">短也可以</a></li>
<li><a href="#">最短</a></li>
</ul>
最后的效果：
注：本例子是书上看到的……原创是一个叫 Douglas Bowman 的不知道哪个国家的人
