CSS3의 접두사 사용법은 무엇입니까-프런트엔드 Q&A-php.cn

CSS3의 접두사 사용법은 무엇입니까

WBOY

풀어 주다： 2022-01-24 14:26:10

원래의

2188명이 탐색했습니다.

CSS3에서 접두사는 다양한 브라우저의 속성 지원과 호환되는 데 사용됩니다. 브라우저 제조업체는 웹킷을 핵심으로 하는 브라우저에 "-webkit"을 추가하기 위해 속성 앞에 개인 접두사를 추가합니다. -"를 속성 앞에 붙입니다. 접두사, 구문은 "-webkit-property:property value;"이며, 다른 커널을 사용하는 브라우저는 다른 접두사를 추가합니다.

CSS3의 접두사 사용법은 무엇입니까

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

Css3에서 접두어의 사용법은 무엇입니까? CSS에서 다양한 브라우저의 속성 지원과 호환되도록 브라우저 제조업체는 접두사 "-webkit"을 사용하여 새 속성을 지원하기 위해 속성 앞에 개인 접두사를 추가합니다. -"를 사용할 수 있습니다. "사파리", "크롬" 브라우저 등 Webkit을 핵심으로 하는 브라우저에서는 정상적으로 사용할 수 있습니다.

1, -moz-firefox 브라우저의 개인 속성을 나타냅니다

2, -ms-IE 브라우저의 개인 속성을 나타냅니다

3, -webkit-safari 및 chrome

4의 개인 속성을 나타냅니다. - o-는 Opera를 나타냅니다

이는 이전 버전의 쓰기 방법과의 호환성을 위한 것입니다. 최신 버전의 브라우저는 직접 쓰기(border-radius)를 지원합니다.

Internet Explorer 9+는 border-radius 및 box-shadow 속성을 지원합니다.

Firefox, Chrome 및 Safari는 모든 새로운 테두리 속성을 지원합니다.

border-image의 경우: Safari 5 이상에는 접두사 -webkit-이 필요합니다.

Opera는 border-radius 및 box-shadow 속성을 지원하지만 border-image에는 접두사 -o-가 필요합니다.

예는 다음과 같습니다.

<html>
<head>
<style> 
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

로그인 후 복사

개인 접두사는 왜 필요한가요? HTML과 CSS 표준을 제정하는 조직인 W3C의 속도가 매우 느리기 때문입니다. 보통 w3c 조직의 구성원이 rounded border-radius 같은 새로운 속성을 제안하면 모두가 좋다고 생각하는데, w3c에서는 이 속성에 대한 기준을 정하지 않고 매우 복잡한 과정을 거치게 되며 많은 리뷰.

브라우저 공급업체는 속성이 충분히 성숙하다고 생각하면 그렇게 오래 기다리지 않습니다. 하지만 향후 w3c가 표준을 발표할 때 변경을 방지하기 위해 -webkit-border-radius와 같은 전용 접두어를 추가하여 향후 w3c가 표준을 발표할 때 의 표준 작성 방법을 미리 지원할 예정입니다. border-radius가 설정되고 새 버전의 브라우저에서 border-radius 쓰기 방법을 지원하게 됩니다.

예를 들어 Chrome 10은 border-radius를 인식하지 못하고 webkit-border-radius만 사용할 수 있지만 Chrome 12에서는 이를 인식할 수 있습니다. 따라서 CSS를 작성할 때 이렇게 작성하면 웹을 탐색할 때 Chrome10과 Chrome12가 모두 올바르게 표시될 수 있습니다.

현재 생략할 수 있는 개인 접두사가 많이 있지만 이전 버전의 브라우저와 호환되도록 여전히 개인 접두사와 표준 방법을 사용하고 점진적으로 전환할 수 있습니다

(동영상 공유 학습:

css 동영상 튜토리얼

)

위 내용은 CSS3의 접두사 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!