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

IE7 및 IE8의 Box Shadow

CSS Box Shadow는 웹페이지 요소에 깊이와 차원을 추가하는 강력한 방법입니다. 그러나 IE7 및 IE8에서는 이러한 섀도우가 지원되지 않습니다. 원하는 효과를 얻으려면 HTML, CSS 및 JavaScript를 조합하여 사용할 수 있습니다.

CSS 솔루션

한 가지 옵션은 CSS3 PIE 라이브러리를 사용하는 것입니다. 이전 버전의 IE에서 CSS3 속성을 에뮬레이트할 수 있습니다. PIE는 inset 키워드를 제외하고 box-shadow를 지원하므로 이를 사용하여 IE7 및 IE8의 요소에 상자 그림자를 적용할 수 있습니다. 다음은 사용할 수 있는 업데이트된 CSS입니다.

.bright{
    position: absolute;
    z-index: 1; 
    -moz-box-shadow: 0px -3px 55px 20px #147197;
    box-shadow: 0px -3px 55px 20px #147197;
    -webkit-box-shadow: 0px -3px 55px 20px #147197;
    behavior: url(ie-css3.htc);
}

ie-css3.htc 파일을 다운로드하여 웹 페이지에 포함해야 합니다.

JavaScript 솔루션

또 다른 옵션은 JavaScript를 사용하여 상자 그림자 효과를 만드는 것입니다. IE7 및 IE8에 상자 그림자 지원을 추가하는 JavaScript 라이브러리 BoxShadows.js를 사용할 수 있습니다. 사용 방법은 다음과 같습니다.

<div class="bright"></div>

$(".bright").boxShadow({
    x: 0,
    y: -3,
    blur: 55,
    color: "#147197"
});

IE 브라우저 호환성

IE7은 CSS3와 같은 최신 기능을 지원하지 않는다는 점에 유의하는 것이 중요합니다. 상자 그림자이므로 이 효과를 얻으려면 폴리필이나 JavaScript 솔루션을 사용해야 합니다. IE8은 일부 CSS3 기능을 지원하지만 전부는 아닙니다. 따라서 기능 감지 스크립트를 사용하여 지원되는 기능을 확인하고 그에 따라 적절한 대체 방법을 사용해야 합니다.

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