border:none과 border:0의 차이점_기본 튜토리얼

1. border:none
border-style의 약어
크롬 리뷰 요소에서 다음 결과 확인

코드 복사 코드는 다음과 같습니다.

element.style {
border: none;
border-top-style: none;
border-right-style: none;
테두리 하단 스타일: 없음;
테두리 왼쪽 스타일: 없음;
테두리 너비: 초기;
테두리 색상: 초기;
}

in Firefox Firebug를 사용하여 요소를 보면 다음과 같은 결과가 표시됩니다.

코드 복사 코드

element .style {
border: media none;
}

medium 값에 주의하세요
2. 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: 이니셜;
border-color: 이니셜;
}

Firebug를 사용하여 Firefox에서 요소를 보면 다음과 같은 결과가 표시됩니다.

코드 복사 코드는 다음과 같습니다.

element.style {
border: 0 none;
}

firebug에서 border:none과 border:0의 차이점에 주의하세요
다음은 자세히 설명하기 위한 예시입니다

코드 복사 코드는 다음과 같습니다

< div class="setwidth">
"테두리: 0" 및 "border-width: 3px"

"테두리 : 0" 및 "테두리 스타일: 점선"

"테두리: 없음" 및 "테두리 너비: 3px"

"테두리: 없음" 및 " border-style: dashed"

관심 있으신 분들은 위 코드를 복사하여 이 브라우저에서 사용해 보세요.
테스트 결과:
1. .zerotest .setwidth
border-width: 3px가 정의되어 있지만 border-style: none이므로 테두리가 없습니다(IE7과 관련된 3픽셀 테두리가 표시됩니다). 테두리:0 구문 분석. 아래에서 설명합니다)
2. .zerotest .setstyle
border-style: dashed가 정의되어 있지만 border-width:0이므로 테두리가 없습니다
3. border-width: 3px로 정의되었지만 border-style: none이므로 테두리가 없습니다(IE7에서는 테두리가 없음)
4. .nonetest .setstyle
은 border-style: dashed border-style을 기본값으로 정의합니다. Medium border-color 기본값은 black이므로 3픽셀의 검은 점선 프레임이 표시됩니다(IE7에서는 1픽셀)
1과 4를 기준으로 하면 IE7에서는
border: 0은 border-width:0으로 구문 분석됩니다
border:none은 border-style:none으로 구문 분석됩니다
표준 브라우저를 살펴보겠습니다
border:0은 border보다 border-width:0을 하나 더 렌더링합니다. :none, 이것이 border:none의 성능이 border:0 height보다 나은 이유입니다
그래서 Design Hive에서는 경계 없는 효과를 얻기 위해 border:none을 사용할 것을 권장합니다.