CSS滑动门特性

原文链接：http://www.cnblogs.com/amboyna/archive/2009/02/03/1383000.html

看了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 的不知道哪个国家的人