亚洲免费乱码视频,日韩 欧美 国产 动漫 一区,97在线观看免费视频播国产,中文字幕亚洲图片

      1. <legend id="ppnor"></legend>

      2. 
        
        <sup id="ppnor"><input id="ppnor"></input></sup>
        <s id="ppnor"></s>

        border:none與border:0使用區(qū)別

        字號(hào):


            一、border:none
            border-style的簡(jiǎn)寫
            在chrome審查元素看到以下結(jié)果
            代碼如下:
            element.style {
            border: none;
            border-top-style: none;
            border-right-style: none;
            border-bottom-style: none;
            border-left-style: none;
            border-width: initial;
            border-color: initial;
            }
            在firefox中用firebug查看元素會(huì)看到以下結(jié)果:
            代碼如下:
            element.style {
            border: medium none;
            }
            注意這個(gè)medium值
            二、border:0
            border-width的簡(jiǎn)寫
            在chrome審查元素看到以下結(jié)果
            代碼如下:
            element.style {
            border: 0;
            border-top-width: 0px;
            border-right-width: 0px;
            border-bottom-width: 0px;
            border-left-width: 0px;
            border-style: initial;
            border-color: initial;
            }
            在firefox中用firebug查看元素會(huì)看到以下結(jié)果:
            代碼如下:
            element.style {
            border: 0 none;
            }
            注意在firebug中border:none和border:0的區(qū)別
            下面舉個(gè)例子來具體說明下
            代碼如下:
            <style>
            div {border: 1px solid black; margin: 1em;}
            .zerotest div {border: 0;}
            .nonetest div {border: none;}
            div.setwidth {border-width: 3px;}
            div.setstyle {border-style: dashed;}
            </style>
            <div class=zerotest>
            <div class=setwidth>
            border: 0 and border-width: 3px
            </div>
            <div class=setstyle>
            border: 0 and border-style: dashed
            </div>
            </div>
            <div class=nonetest>
            <div class=setwidth>
            border: none and border-width: 3px
            </div>
            <div class=setstyle>
            border: none and border-style: dashed
            </div>
            </div>
            有興趣的朋友可以復(fù)制以上代碼在這個(gè)瀏覽器試一試:
            測(cè)試結(jié)果:
            1、.zerotest .setwidth
            雖然定義了border-width:3px,但是border-style:none 所以無(wú)邊框(ie7會(huì)顯示3像素的邊框,這跟border:0解析有關(guān)。下面會(huì)講到)
            2、.zerotest .setstyle
            雖然定義了border-style: dashed,但是border-width:0 所以無(wú)邊框
            3、.nonetest .setwidth
            雖然定義了border-width:3px,但是border-style:none 所以無(wú)邊框(ie7下無(wú)邊框)
            4、.nonetest .setstyle
            定義了border-style:dashed border-style為默認(rèn)值medium border-color為默認(rèn)值black 所以會(huì)顯示3像素黑色的虛線框(ie7下為一像素)
            綜合1、4可以分析出在ie7下
            border:0 被解析為 border-width:0
            border:none 被解析為 border-style:none
            再來看看標(biāo)準(zhǔn)瀏覽器
            border:0 比 border:none多渲染了一個(gè)border-width:0,也就是為什么border:none的性能要比border:0高
            所以建議使用border:none來實(shí)現(xiàn)無(wú)邊框效果