學習來源: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值是爲了讓文字與按鈕左右有空隙