實現滑動門的三種方法

定義

　　在border-radius出現之前，實現圓角效果使用的是滑動門。滑動門是利用背景圖像的可層疊性，並允許他們在彼此之上進行滑動，以創造一些特殊的效果。

 

案例效果

 

切圖

實現方法

　　滑動門的實現共三種方法：三層嵌套、兩層嵌套和絕對定位。

 

三層嵌套

　　三層嵌套，文字只能寫到最里面的div里，適用於圖片比較大或者拓展要求高，比如導航。

　　[注意1]要想讓滑動門適用於多種場合，左右兩個角必須透明，以此露出背景顏色，若是左右壓中間，左右角的透明部分露出的是中間的顏色，所以只能改成中間壓左右，然后中間用margin，不與左右相疊壓。

　　[注意2]因為滑動門需要寬度自適應，對最外層的<div>用float或inline-block使其寬度由內容撐開

.boxL{
    display: inline-block;
    background: url('boxL.png') no-repeat left 0 ;
}
.boxR{
    background: url('boxR.png') no-repeat right 0;
}
.box{
    background: url('boxM.jpg') repeat-x;
    font: 14px/30px "宋體";
    color: white;
    padding: 1px 10px 0;
    margin: 0 8px;
}

<div class="boxL">
    <div class="boxR">
        <div class="box">關於我們</div>
    </div>
</div>

 

兩層嵌套

　　兩層嵌套，文字只能寫到最里面的div里，局限是文字最多只能到父級div的寬度，適用於圖片比較小或者拓展要求小，比如按鈕。

.boxR{
    display: inline-block;
    background: url('boxR.png') no-repeat right 0;
}
.boxB{
    background: url('boxB.jpg') repeat-x;
    font: 14px/30px "宋體";
    color: white;
    padding: 1px 10px 0 18px;
    margin-right: 8px;
}

<div class="boxR">
    <div class="boxB">關於我們</div>
</div>    

 

絕對定位

　　用絕對定位做的滑動門有兼容性，因為在IE6下，絕對定位父級的寬度（高度）是奇數的話，元素的right(buttom)就會有1px的偏差，且無解。

.boxL{
    position: absolute;
    top: 0;
    left: -9px;
    width: 9px;
    height: 31px;
    background: url('boxL.png') no-repeat right 0;
}
.boxR{
    position: absolute;
    top: 0px;
    right: -9px;
    width: 9px;
    height: 31px;    
    background: url('boxR.png') no-repeat right 0;
}
.box{
    position: absolute;
    background: url('boxM.jpg') repeat-x;
    font: 14px/30px "宋體";
    color: white;
    padding: 1px 10px 0;
    margin: 30px;
}

<div class="box">
    <span>關於我們</span>
    <div class="boxL"></div>
    <div class="boxR"></div>
</div>    

 

實現效果