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

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

作者: 不2青年 | 来源:发表于2018-02-02 17:47 被阅读0次

    一、CSS3实现:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3实现</title>
        <style>
            body{
                background: grey;
            }
            .box{
                margin: 30px auto;
                width: 200px;
                height: 200px;
                border: 2px solid black;
                border-radius: 20px;/* CSS3实现 */
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>
    

    缺点:IE6下不兼容CSS3

    二、三层嵌套实现:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三层嵌套实现</title>
        <style>
            .box{
                width: 200px;
                margin: 30px auto;
            }
            .boxHead{
                background: url('img2/boxH.png') repeat-x;
                height: 9px;
                overflow: hidden;
            }
            .HeadL{
                background: url('img2/boxHL.png') no-repeat;
            }
            .HeadR{
                background: url('img2/boxHR.png') no-repeat right 0;
                height: 9px;
            }
            
            .center{
                border-left: 1px solid #e5e5e5;
                border-right: 1px solid #e5e5e5;
            }
    
            .footerHead{
                background: url('img2/boxF.png') repeat-x;
                height: 9px;
                overflow: hidden;
            }
            .footerL{
                background: url('img2/boxFL.png') no-repeat;
            }
            .footerR{
                background: url('img2/boxFR.png') no-repeat right 0;
                height: 9px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="boxHead">
                <div class="HeadL">
                    <div class="HeadR"></div>
                </div>
            </div>
    
            <div class="center">
                    内容内容内容内容内容<br/>
                    内容内容内容内容内容<br/>
                    内容内容内容内容内容<br/>
                    内容内容内容内容内容<br/>
                    内容内容内容内容内容<br/>
            </div>
    
            <div class="footerHead">
                <div class="footerL">
                    <div class="footerR"></div>
                </div>
            </div>
        </div>
    </body>
    </html>
    

    效果图:

    三层嵌套实现.png

    缺点:边框圆角不透明。

    三、三层嵌套加定位实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三层嵌套加定位实现</title>
        <style>
            body{
                background: grey;
            }
            .box{
                width: 82px;
                margin: 30px auto;
                background: url('img3/btn.gif') repeat-x;
            }
            .boxL{
                background: url('img3/btnL.gif') no-repeat;
                position: relative;
                left: -9px;
            }
            .boxR{
                background: url('img3/btnR.gif') no-repeat right 0;
                height: 30px;
                position: relative;
                right: -18px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="boxL">
                <div class="boxR"></div>
            </div>
        </div>
    </body>
    </html>
    

    效果图:

    圆角透明.png

    四、三层嵌套加margin实现:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三层嵌套加margin实现</title>
        <style>
            body{
                background: grey;
            }
            .boxL{
                width: 100px;
                margin: 30px auto;
                background: url('img3/btnL.gif') no-repeat;
            }
            .boxR{
                background: url('img3/btnR.gif') no-repeat right 0;
            }
            .box{
                height: 30px;
                background: url('img3/btn.gif') repeat-x;
                margin: 0 9px;
            }
        </style>
    </head>
    <body>
        <div class="boxL">
            <div class="boxR">
                <div class="box"></div>
            </div>
        </div>
    </body>
    </html>
    

    效果图:

    圆角透明.png

    总结:

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/ajvezxtx.html