Differences between border:none and border:0_Basic Tutorial-CSS Tutorial-php.cn

Differences between border:none and border:0_Basic Tutorial

WBOY

Release： 2016-05-16 12:03:50

Original

1904 people have browsed it

1. border:none
The abbreviation of border-style
Inspect the element in chrome and see the following results

Copy code The code is 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;
}

If you use firebug to view the element in firefox, you will see the following results:

Copy code The code is as follows:

element.style {
 border: medium none;
}

Pay attention to the medium value
2. border:0
Abbreviation for border-width
Inspect the element in chrome and see the following results

Copy code The code is 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;
}

If you use firebug to view the element in firefox, you will see the following results:

Copy the code The code is as follows:

element.style {
 border: 0 none;}

Pay attention to the difference between border:none and border:0 in firebug
The following is an example to explain in detail

Copy code The code is as follows:

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

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

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

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

Interested friends can copy the above code and try it in this browser:
Test results:
1. .zerotest .setwidth
Although border-width: 3px is defined, border-style :none, so there is no border (IE7 will display a 3-pixel border, which is related to border:0 parsing. It will be discussed below)
2. .zerotest .setstyle
Although border-style: dashed is defined, border -width:0 so there is no border
3. .nonetest .setwidth
Although border-width:3px is defined, border-style:none so there is no border (no border under IE7)
4. .nonetest .setstyle
defines border-style: dashed border-style is the default value medium and border-color is the default value black, so a 3-pixel black dashed box will be displayed (one pixel under IE7)
Integrated 1 and 4 can be It is analyzed that under IE7,
border:0 is parsed as border-width:0
border:none and is parsed as border-style:none
Let’s take a look at the standard browser
border:0 than border :none renders an extra border-width:0, which is why the performance of border:none is higher than border:0
So Design Hive recommends using border:none to achieve a borderless effect.