CSS3 그림자(Shadows)

CSS를 사용하여3요소에 그림자를 적용할 수 있습니다.

CSS를 사용하여3그림자

CSS3Photoshop와 같이 요소에 그림자 효과를 추가할 수 있도록 하며, 어떤 이미지도 사용하지 않아도 됩니다. CSS3이전에는, 슬라이스 이미지가 매우 번거로운 요소 주변에 그림자를 만들기 위해 사용되었습니다.

다음 절에서는 텍스트와 요소에 그림자를 적용하는 방법을 소개할 것입니다。

CSS3 box-shadow 속성을 사용하여

box-shadow 속성은 요소의 박스에 그림자를 추가할 수 있습니다. 심지어 콤마로 구분된 그림자 목록을 사용하여 여러 개의 그림자 효과를 적용할 수 있습니다. 박스 그림자를 생성하는 기본 문법은 다음과 같습니다：

box-shadow: offset-x offset-y blur-radius color;

이 box-shadow 속성의 구성 요소는 다음과 같습니다：

• offset-x —그림자의 세로 위치를 설정합니다.

• offset-y —그림자의 가로 위치를 설정합니다.

• blur-radius —모호성 반지름을 설정합니다. 값이 클수록 모호성이 커지고, 그림자의 경계선이 흐릿해집니다. 음수 값을 사용할 수 없습니다.

• color —그림자의 색상을 설정합니다. 색상 값이 생략되거나 지정되지 않으면 기본 색상을 사용합니다.color속성 값을 참조하세요.

CSS3 box-shadow 속성을 참조하여 다른 가능한 값에 대한更多信息를 알아보세요.

.box{
　　　　width:　200px;
　　　　height:　150px;
　　　　background: #ccc;
　　　　box-shadow:　5px　5px　10px #999;
}

또한, 콤마로 구분된 목록을 사용하여 여러 개의 박스 그림자를 추가할 수 있습니다:

.box{
　　　　width:　200px;
　　　　height:　150px;
　　　　background: #000;
　　　　box-shadow:　5px　5px　10px red,　10px　10px　20px yellow;
}

CSS3 text-shadow 속성을 사용하여

text-shadow 속성을 사용하여 텍스트에 그림자 효과를 적용할 수 있습니다. 또한 box와 같은 속성을 사용하여-shadow와 같은 표현법을 사용하여 텍스트에 여러 개의 그림자를 적용할 수 있습니다.

h1　{
　　　　text-shadow:　5px　5px　10px #666;
}
h2　{
　　　　text-shadow:　5px　5px　10px red,　10px　10px　20px yellow;
}