[CSS]三層嵌套的滑動門

標籤：blog   http   width   2014   line   div   

原理：

最外層放水平平鋪的背景，第二層放左邊，第三層放右邊，注意這個做法背景圖不能透明

結構:

<div class="module-title">

    <span class="left">

        <span class="right"></span>

    </span>

</div>

樣式：

.module-title {
    height:33px;
    background: url(../images/more-title.png) 0 -33px repeat-x;
    text-indent: 0;
}
.module-title .left{
    display:inline-block;
    height: 33px;
    line-height: 34px;
    padding-left:30px;
    background: url(../images/more-title.png) 0 0 no-repeat;
}
.module-title .right{
    display:inline-block;
    min-width:4em;
    height: 33px;
    padding-right:48px;
    line-height: 34px;
    background: url(../images/more-title.png) right -66px no-repeat;
    text-align:center;
}

背景圖: