滑动门以及圆角边框的多种实现方式——2018-02-02

一、CSS3实现：

缺点：IE6下不兼容CSS3

二、三层嵌套实现：

    
    
    


    

        

            

                

            
        

        

                内容内容内容内容内容

                内容内容内容内容内容

                内容内容内容内容内容

                内容内容内容内容内容

                内容内容内容内容内容

        

        

            

                

            
        
    

效果图：

三层嵌套实现.png

缺点：边框圆角不透明。

三、三层嵌套加定位实现

效果图：

圆角透明.png

四、三层嵌套加margin实现：

效果图：

圆角透明.png

总结：

一般拓展性强的用三层嵌套实现，拓展性不强的用两层嵌套实现，无拓展性的直接用确定像素的背景实现。