CSS3 의 box-shadow 속성을 사용하면 레이어 그림자 효과를 쉽게 얻을 수 있습니다. 이 속성을 실제로 자세히 설명하겠습니다.
먼저 이 속성의 브라우저 호환성을 살펴보겠습니다.
box-shadow에는 6개의 설정 가능한 값이 있습니다:
img{box-shadow: 그림자 종류 X축 변위 Y축 변위 그림자 크기 그림자 확장 그림자 색상}
몇 가지 예를 통해 상자 그림자의 효과를 살펴보겠습니다. 먼저 테스트용 간단한 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;
box-shadow:2px 2px 10px #06C;
}