当前位置:  编程技术>WEB前端

border:none与border:0使用区别

    来源: 互联网  发布时间:2014-10-07

    本文导语:  一、border:noneborder-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查看元素...

一、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的区别
下面举个例子来具体说明下
代码如下:


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



"Border: 0" and "border-width: 3px"


"Border: 0" and "border-style: dashed"




"Border: none" and "border-width: 3px"


"Border: none" and "border-style: dashed"



有兴趣的朋友可以复制以上代码在这个浏览器试一试:
测试结果:
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下无边框)
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来实现无边框效果

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • java命名空间javax.swing.border类titledborder的类成员方法: border定义及介绍
  • 边框(border)边距(margin)和间隙(padding)属性的区别
  • java命名空间javax.swing.border接口border的类成员方法: isborderopaque定义及介绍
  • jQuery图像边框插件 Inset Border Effect
  • java命名空间javax.swing.border接口border的类成员方法: getborderinsets定义及介绍
  • "<jsp:param name="tableOptions" value="border=4"/>",这样写有没有错???
  • java命名空间javax.swing.border接口border的类成员方法: paintborder定义及介绍
  • 在IE下拖动滚动条时border消失的解决方法
  • java命名空间javax.swing.border类titledborder的类成员方法: setborder定义及介绍
  • DIV border边框显示不完全问题的解决方法
  • java命名空间javax.swing.tree类defaulttreecelleditor.defaulttextfield的类成员方法: border定义及介绍
  • 我的是jre1.4.0的版本。为什么想倒入com.sun.java.swing.border.* 时没有呢??
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • firefox下rowspan+border+border-collapse的bug
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: border定义及介绍
  • c/c++ iis7站长之家
  • java命名空间javax.swing.border类titledborder的类成员方法: titledborder定义及介绍
  • 写CSS_关于Border你可能需要注意的地方第1/2页
  • java命名空间java.awt类systemcolor的类成员方法: window_border定义及介绍
  • java命名空间javax.swing.border类titledborder的类成员方法: getborder定义及介绍
  • java命名空间javax.swing.border类compoundborder的类成员方法: getoutsideborder定义及介绍


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3