>  기사  >  웹 프론트엔드  >  IE7 및 IE8에서 상자 그림자를 만드는 방법은 무엇입니까?

IE7 및 IE8에서 상자 그림자를 만드는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-11-06 12:06:02483검색

How to Create Box Shadows in IE7 and IE8?

IE7 및 IE8의 Box Shadow: 종합 가이드

IE7 및 IE8에서 Box Shadow를 달성하는 것은 어려울 수 있지만 실행 가능한 솔루션은 다음과 같습니다. CSS3 PIE에서. 이러한 브라우저에서 CSS3 속성을 에뮬레이션함으로써 CSS3 PIE를 통해 개발자는 상자 그림자를 쉽게 구현할 수 있습니다.

상자 그림자용 CSS 코드

색상 상자 그림자를 브라우저에 적용하려면 div 요소에는 다음 CSS를 사용합니다.

.bright {
    position: absolute;
    z-index: 1; 
    box-shadow: 0px -3px 55px 20px #147197;
}

IE 전용 솔루션

위의 CSS 코드는 IE9 이상에서 작동하지만 box는 지원하지 않습니다. IE7 및 IE8의 그림자. 이 문제를 해결하려면 다음을 사용할 수 있습니다.

ie-css3.htc 파일: 이 파일은 IE에서 기본 섀도우 지원을 제공하지만 검은색 섀도우만 생성합니다.

filter: progid:DXImageTransform.Microsoft.Shadow: 이 방법은 방향성 그림자를 생성하는데, 이는 전방향 그림자에 적합하지 않을 수 있습니다.

CSS3 PIE

IE7 및 IE8의 상자 그림자에 대한 가장 효과적인 솔루션은 CSS3 PIE입니다. 이 도구는 HTML과 JavaScript의 조합을 사용하여 box-shadow 속성을 에뮬레이트합니다. "inset" 키워드를 제외한 box-shadow의 모든 속성을 지원합니다.

CSS3 PIE를 사용하려면 라이브러리를 다운로드하여 HTML 파일에 포함하세요.

<script src="PIE.htc"></script>

라이브러리에서는 평소대로 상자 그림자를 적용할 수 있습니다. CSS3 PIE는 IE7 및 IE8에서 자동으로 에뮬레이션을 처리합니다.

결론

상자 그림자는 CSS3 PIE를 사용하여 IE7 및 IE8에서 구현할 수 있습니다. 이 도구는 상자 그림자 속성에 대한 탁월한 지원을 제공하므로 웹 요소에 시각적 깊이를 추가하기 위한 안정적인 솔루션입니다.

위 내용은 IE7 및 IE8에서 상자 그림자를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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