>  기사  >  웹 프론트엔드  >  CSS3 파이를 사용하는 방법

CSS3 파이를 사용하는 방법

藏色散人
藏色散人원래의
2020-12-17 10:04:252116검색

css3 파이 사용 방법: 먼저 CSS3PIE 플러그인을 다운로드한 다음 Pie.htc 파일을 프로젝트 폴더에 넣은 다음 css3이 필요한 CSS 코드에 "behavior: url(PIE.htc)"를 추가합니다. 마지막으로 htc 파일의 위치를 ​​지정합니다.

CSS3 파이를 사용하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "css 비디오 튜토리얼"

CSS3pie가 무엇인가요?

CSS3pie는 IE6~IE8 버전에서 둥근 모서리, 그림자, 그라데이션 등과 같은 대부분의 CSS3 수정 기능을 실현할 수 있게 해주는 매우 뛰어난 CSS3 도구입니다. 이 도구를 통해 온라인에서 원하는 효과를 수정하고 CSS 코드를 즉시 생성할 수 있습니다. .

css3pie를 사용하는 방법은 무엇입니까?

1. CSS3PIE 플러그인을 다운로드하세요.

다운로드 주소: http://css3pie.com/download/ GitHub https://github.com/lojjic/PIE/downloads

2. 다운로드한 파일에서

를 사용하세요. 압축에는 세 개의 파일이 있으며 그 중 하나는 PIE.htc입니다. 이것은 IE6-8이 일부 CSS3 기능을 지원할 수 있도록 하는 플러그인입니다.

pie.htc 파일을 프로젝트 폴더에 넣으세요.

Css 코드에서 css3을 사용해야 하는 경우 url(PIE.htc) 동작을 추가합니다. htc 파일의 위치(html 문서 기준)를 지정하기만 하면 됩니다.

예:

둥근 모서리, 그림자 및 그라데이션 효과 포함.

.pie{
width: 200px; 
height: 100px;
line-height: 100px;
font-size:14px; 
border: 1px solid #669966; 
text-align: center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666666 0 2px 3px;
-moz-box-shadow: #666666 0 2px 3px ;
box-shadow: #666666 0 2px 3px ;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));   
background: -webkit-linear-gradient(#EEFF99, #66EE33);   
background: -moz-linear-gradient(#EEFF99, #66EE33); 
-pie-background: linear-gradient(#EEFF99, #66EE33); 
behavior: url(PIE.htc);
position:relative;
z-index:10;
}

렌더링:

CSS3 파이를 사용하는 방법

웹 프론트엔드 개발에 대한 더 많은 지식을 알고 싶다면 HTML 중국어 웹사이트를 확인해 보세요! !

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.