您当前的位置:首页 > 建站常识 > css强化

border:none与border:0使用区别

2016-06-13

  一、border:noneKaz七七世界-网站建设|UI设计|人资系统|二次开发

  border-style的简写Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  在chrome审查元素看到以下结果Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  代码如下:Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  element.style {Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border: none;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border-top-style: none;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border-right-style: none;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border-bottom-style: none;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border-left-style: none;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border-width: initial;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border-color: initial;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  }Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  在firefox中用firebug查看元素会看到以下结果:Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  代码如下:Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  element.style {Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border: medium none;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  }Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  注意这个medium值Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  二、border:0Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  border-width的简写Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  在chrome审查元素看到以下结果Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  代码如下:Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  element.style {Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border: 0;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border-top-width: 0px;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border-right-width: 0px;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border-bottom-width: 0px;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border-left-width: 0px;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border-style: initial;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border-color: initial;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  }Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  在firefox中用firebug查看元素会看到以下结果:Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  代码如下:Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  element.style {Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    border: 0 none;Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  }Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  注意在firebug中border:none和border:0的区别Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  下面举个例子来具体说明下Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  代码如下:Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  <style>Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    div {border: 1px solid black; margin: 1em;}Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    .zerotest div {border: 0;}Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    .nonetest div {border: none;}Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    div.setwidth {border-width: 3px;}Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    div.setstyle {border-style: dashed;}Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  </style>Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  <div class="zerotest">Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    <div class="setwidth">Kaz七七世界-网站建设|UI设计|人资系统|二次开发

      "Border: 0" and "border-width: 3px"Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    </div>Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    <div class="setstyle">Kaz七七世界-网站建设|UI设计|人资系统|二次开发

      "Border: 0" and "border-style: dashed"Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    </div>Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  </div>Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  <div class="nonetest">Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    <div class="setwidth">Kaz七七世界-网站建设|UI设计|人资系统|二次开发

      "Border: none" and "border-width: 3px"Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    </div>Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    <div class="setstyle">Kaz七七世界-网站建设|UI设计|人资系统|二次开发

      "Border: none" and "border-style: dashed"Kaz七七世界-网站建设|UI设计|人资系统|二次开发

    </div>Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  </div>Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  有兴趣的朋友可以复制以上代码在这个浏览器试一试:Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  测试结果:Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  1、.zerotest .setwidthKaz七七世界-网站建设|UI设计|人资系统|二次开发

  虽然定义了border-width:3px,但是border-style:none 所以无边框(IE7会显示3像素的边框,这跟border:0解析有关。下面会讲到)Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  2、.zerotest .setstyleKaz七七世界-网站建设|UI设计|人资系统|二次开发

  虽然定义了border-style: dashed,但是border-width:0 所以无边框Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  3、.nonetest .setwidthKaz七七世界-网站建设|UI设计|人资系统|二次开发

  虽然定义了border-width:3px,但是border-style:none 所以无边框(IE7下无边框)Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  4、.nonetest .setstyleKaz七七世界-网站建设|UI设计|人资系统|二次开发

  定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(IE7下为一像素)Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  综合1、4可以分析出在IE7下Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  border:0 被解析为 border-width:0Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  border:none 被解析为 border-style:noneKaz七七世界-网站建设|UI设计|人资系统|二次开发

  再来看看标准浏览器Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  border:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高Kaz七七世界-网站建设|UI设计|人资系统|二次开发

  所以七七建议使用border:none来实现无边框效果Kaz七七世界-网站建设|UI设计|人资系统|二次开发

本文关键词:  

一切精彩源自七七网络!我们倾力打造时尚潮流第一线!

© 2012-2024七七世界网站建设     20707.net 1125w.com 版权所有     豫ICP备14018694号-1