css学习笔记之滑动门

学习来源：http://www.cnblogs.com/xiaohuochai/p/5025394.html

三层嵌套  可扩展 适用于nav

为了使滑动门自适应长度，最外层不固定width，而是用display：inline-block。

把中间放最外层也可以，那就不能用margin值来使透明的圆角不被覆盖，可以让左右两边用相对定位，移出去，让透明圆角露出来。

最好把中间部分放最里面  然后中间部分左右各设置margin值 透明圆角的部分不会被有背景的中间部分遮盖

html：

<div class="btnL">
<div class="btnR">
    <div class="btn">内容</div>
       </div>
</div>

css：

.btnL{ display: inline-block; margin:0 auto; background:url(img3/btnL.gif) no-repeat;}
.btnR{ background:url(img3/btnR.gif) no-repeat right 0;}
.btn{ height:25px; background:url(img3/btn.gif) repeat-x; margin:0 9px;}

两层嵌套  扩展性差 适用于按钮

局限是文字最多只能到父级div的宽度 再多 btn和btnR之间会出现断层

html：

<div class="btn">
<div class="btnR">内容</div>
</div>

css：

.btn{ display: inline-block; background:url(img/btn2.png) no-repeat;}
.btnR{ height:31px; background:url(img/btnR.png) no-repeat right 0; padding: 0 10px;}    padding值是为了让文字与按钮左右有空隙