专心那些medium值

一、border:none
border-style的简写
在chrome核查成分见到以下结果

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查看成分会看见以下结果:

element.style {
    border: medium none;
}

只顾那一个medium值
二、border:0
border-width的简写
在chrome核实成分见到以下结果

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查看成分会看出以下结果:

element.style {
    border: 0 none;
}

注意在firebug中border:none和border:0的区别
下边举个例证来具体表达下

<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>

有野趣的敌人能够复制以上代码在这里个浏览器试大器晚成试:
测验结果:
1、.zerotest .setwidth
虽说定义了border-width:3px,然则border-style:none
所以无边框(IE7会展现3像素的边框,那跟border:0深入剖判有关。上边会讲到卡塔尔国
2、.zerotest .setstyle
即便定义了border-style: dashed,不过border-width:0 所以无边框
3、.nonetest .setwidth
虽说定义了border-width:3px,可是border-style:none
所以无边框(IE7下无边框State of Qatar
4、.nonetest .setstyle
概念了border-style:dashed border-style为暗许值medium
border-color为暗中同意值black 所以会来得3像素辣椒红的虚线框(IE7下为豆蔻年华像素卡塔尔
综合1、4足以解析出在IE7下
border:0 被拆解深入分析为 border-width:0
border:none 被深入解析为 border-style:none
再来看看典型浏览器
border:0 比
border:none多渲染了三个border-width:0,也等于为啥border:none的属性要比border:0高
为此规划蜂巢提出利用border:none来贯彻无边框效果

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website