Border:none and border:0 Use difference

  Borderless with border:none or border:0 has always been a hot question, except that the difference in rendering performance is that there is no difference in the performance of the page in standard browsers. Let's take a look at their essential differences.

First, Border:none Border-style in Chrome review elements see the following results   code as follows: 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;   Viewing elements with Firebug in Firefox will see the following:   code is as follows: Element.style {    border:medium none;}   Note this medium value Second, border:0 border-width in the chrome review element see the following result code as follows: 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;   Viewing elements with Firebug in Firefox will see the following: Copy code code as follows: Element.style {    border:0 none;   Note in Firebug border : The difference between none and border:0 The following example to specify the following code: <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> <d IV 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>   interested friends can To copy the above code in this browser try: Test results: 1,. zerotest. SetWidth Although border-width:3px is defined, Border-style:none does not have a border (IE7 displays a 3-pixel border, which follows border : 0 parsing related. The following is mentioned) 2,. Zerotest. SetStyle Although the definition of border-style:dashed, but border-width:0 So no Border 3,. nonetest. SetWidth Although border-width:3px is defined, border-style:none so no border (IE7 bottom without border) 4,. Nonetest. SetStyle Defines the border-style:dashed Border-style is the default value medium Border-color is black so it will display a 3-pixel dashed box (IE7 under a pixel) synthesis 1, 4 can be analyzed under IE7 border : 0 is resolved to border-width:0 Border:none is resolved to Border-style:none again to see the standard browser border:0 More than Border:none rendering a border-width:0, which is why Border:none performance than border:0 high so the design of the Honeycomb recommended Border:none to achieve a borderless effect