Border:none and border:0 Use the difference _ Basic tutorial

First, Border:none
Shorthand for Border-style
See the following results in the Chrome review element

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

Using Firebug to view elements in Firefox will see the following results:

Copy Code code as follows:

Element.style {
Border:medium none;
}

Notice this medium value
Second, border:0
Shorthand for Border-width
See the following results in the Chrome review element

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

Using Firebug to view elements in Firefox will see the following results:

Copy Code code as follows:

Element.style {
border:0 none;
}

Notice the difference between Border:none and border:0 in Firebug
Let me give you an example to specify

Copy Code code as follows:

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

Interested friends can copy the above code in this browser to 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 is related to border:0 parsing). The following will be 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 does not have a border (IE7 no border)
4. Nonetest. SetStyle
Border-style:dashed Border-style is defined as the default value medium Border-color is black so the dotted box with a 3 pixel color appears (IE7 is one pixel)
Synthesis 1, 4 can be analyzed under the IE7
border:0 is resolved to border-width:0
Border:none is resolved as Border-style:none
Check out the standard browser again.
border:0 More than Border:none rendering a border-width:0, which is why Border:none performance than border:0 high
So designing the hive suggests using border:none to achieve a borderless effect.