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>

 

 

 

最后的效果：

 

• Home
• 很长也没问题的啊
• 短也可以
• 最短

注：本例子是书上看到的……原创是一个叫 Douglas Bowman 的不知道哪个国家的人