CSS3의 box-shadow 속성을 사용하면 레이어 그림자 효과를 쉽게 얻을 수 있습니다. 이 속성을 실제로 자세히 설명하겠습니다.
1. box-shadow 속성의 브라우저 호환성 먼저 이 속성의 브라우저 호환성을 살펴보겠습니다.
Opera: 어떤 버전이 지원되기 시작했는지 모르겠습니다. 테스트를 위해 이 기사를 게시했을 때 이미 box-shadow 속성을 지원하는 최신 버전인 10.53으로 Opera를 업데이트했습니다.
Firefox는 개인 속성 -moz-box-shadow를 통해 이를 지원합니다.
Safari와 Chrome은 개인 속성 -webkit-box-shadow를 통해 이를 지원합니다.
모든 IE에서 지원되지는 않습니다(IE9가 개선되었는지는 모르겠습니다). 걱정하지 마십시오. 기사 마지막 부분에서 IE용 몇 가지 해킹을 소개할 것입니다.
2. box-shadow 속성의 구문
box-shadow에는 6개의 설정 가능한 값이 있습니다:
img{box-shadow: 그림자 종류 X축 변위 Y축 변위 그림자 크기 그림자 확장 그림자 색상}
그림자 유형이 설정되지 않은 경우 기본값은 그림자 효과입니다. 삽입으로 설정하면 내부 그림자 효과가 됩니다.
X축과 Y축 변위는 동일하지 않지만 Photoshop의 "각도" 및 "위치"와 유사합니다.
그림자 크기, 확장자, 색상은 포토샵과 동일합니다.
3. 예제 분석 몇 가지 예제를 통해 상자 그림자의 효과를 살펴보겠습니다. 먼저 테스트용 간단한 HTML을 만듭니다.
<html>
<머리>
<style type="text/css">CSS 부분을 여기에 작성하세요</style>
</head>
<본문>
<img src="test.jpg" />
</body>
</html>
참고: 문제를 피하기 위해 아래 CSS 코드에는 box-shadow만 작성합니다. 실제 사용에서는 -moz-box-shadow 및 -webkit-shadow도 작성해야 합니다. 당신이 해야 할 일은 매우 간단합니다. 두 개의 상자 그림자를 복사하고 그 앞에 -moz- 및 -webkit-을 추가하는 것입니다.
img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
상자 그림자:2px 2px 10px #06C;
}
(1) 그림자, 변위 없음, 10px 그림자 크기, 확장 없음, 색상 #06C
img{box-shadow:0 0 10px #06C;}
여기서 색상 값은 HEX 값입니다. RGBA 값의 장점은 추가 알파 투명도 값이 있고 그림자의 투명도를 제어할 수 있다는 것입니다.
img{상자 그림자: 0 0 10px rgba(0, 255, 0, .5)}
(2) 위에 20px 확장자를 추가합니다.
img{box-shadow:0 0 10px 20px #06C;}
(3) 내부 그림자, 변위 없음, 10px 크기, 확장 없음, 색상 #06C
img{box-shadow:inset 0 0 10px #06C;}
(4) 여러 그림자 효과.
박스-섀도는 동시에 여러 번 사용할 수 있는 4색 섀도우를 사용해 보겠습니다.
img{box-shadow:-10px 0 10px 빨간색, box-shadow:10px 0 10px 파란색,box-shadow:0 -10px 10px 노란색,box-shadow:0 10px 10px 녹색}
(5) 여러 개의 섀도우 속성을 사용하는 순서 동일한 요소에 대해 여러 개의 섀도우 속성을 사용하는 경우 먼저 작성된 섀도우가 맨 위에 표시되므로 주의해야 합니다. 예를 들어, 다음 코드에서는 먼저 10px 녹색 그림자를 작성한 다음 10px 크기이지만 20px 그림자를 확장하여 작성합니다. 결과는 노란색 음영 레이어 위에 녹색 음영 레이어가 생기는 것입니다.
img{box-shadow:0 0 10px 녹색;box-shadow:0 0 10px 20px 노란색}
하지만 순서를 바꾸면 다음과 같습니다.
img{box-shadow:0 0 10px 20px 노란색,box-shadow:0 0 10px 녹색;}
녹색 음영 레이어는 먼저 작성된 노란색 레이어로 덮여 있고 반경이 더 크기 때문에 나중에 작성된 녹색 음영 레이어를 볼 수 없습니다.
4. IE도 box-shadow를 지원하도록 하세요
IE 자체는 유사한 효과를 얻기 위해 섀도우 필터를 사용하며, IE에서 이 효과를 얻는 데 도움이 될 수 있는 js 및 .htc 해킹 파일도 있습니다. 다 해볼 수는 없어서 제가 사용해본 것 하나만 소개하겠습니다.
ie-css3.htc는 IE 브라우저가 box-shadow뿐만 아니라 일부 CSS3 속성을 지원할 수 있도록 하는 htc 파일입니다. 또한 IE 브라우저가 둥근 모서리 속성인 border-radius 및 텍스트 그림자 속성인 text-shadow도 지원할 수 있습니다.
사용 방법: 다운로드하여 서버 디렉토리에 넣습니다.
<head></head>에 다음 코드를 작성하세요.
<!--[IE의 경우]>
<스타일 유형="텍스트/css">
img, #testdiv, .testbox{동작: url( http://yourdomain.com/js/ie-css3.htc );}
</style>
<![endif]-->
파란색 부분에는 box-shadow 속성을 이용하여 셀렉터를 입력하고, 녹색 부분에는 ie-css3.htc의 절대 경로 또는 상대 경로를 입력해 주시고, 어쨌든 접근이 가능한지 확인해주세요.
그렇다면 괜찮습니다. 하지만 아직 주의해야 할 몇 가지 사항이 있습니다.
이 htc 파일을 사용할 때 box-shadow, -moz-box-shadow 또는 -webkit-box-shadow가 CSS에 작성되어 있는 한 IE는 이를 렌더링합니다.
이 htc 파일을 사용할 때 box-shadow: 0 0 10px red;를 작성할 수 없지만 box-shadow: 0px 0px 10px red는 그렇지 않으면 IE에서 실패합니다.
RGBA 값의 알파 투명도는 지원되지 않습니다.
삽입된 내부 그림자는 지원되지 않습니다.
그림자 확장은 지원되지 않습니다.
그림자는 다른 색상을 설정하더라도 IE에서는 검은색으로만 나타납니다.
따라서 이 스크립트는 IE가 일부 box-shadow 값만 지원하도록 허용합니다. 다른 더 나은 IE 해킹 스크립트가 있으면 공유할 메시지를 남겨주세요.