소개
박스 영역에 대한 그림자 효과를 부여할 때에는 box-shadow 속성을 사용하고,
텍스트 영역에 대한 그림자 효과는 text-shadow 속성을 사용합니다.
옵션
box-shadow: offsetX offsetY blurRadius color
- offsetX : X축으로 +/- 픽셀 위치 : 박스(텍스트) 왼쪽(-) 또는 오른쪽(+)
- offsetY : Y축으로+/- 픽셀 위치 : 박스(텍스트) 위쪽(-) 또는 아래쪽(+)
- blurRadius : 흐려짐 정도
- color : 색상
소스
BoxShadowTextShadow.css
#myBox
{
border:1px solid gray; width:300px; height:200px;
box-shadow:5px 5px 10px red;
}
#myText
{
border:1px solid gray;
font-size:30px;
text-shadow:1px 1px 2px #FFFF00;
}
BoxShadowTextShadow.htm
<!DOCTYPE html>
<html>
<head>
<title>box-shadow, text-shadow 속성</title>
<link href="BoxShadowTextShadow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="myBox">
box-shadow 속성은 박스에 그림자 효과
</div>
<br />
<span id="myText">
text-shadow 속성은 텍스트에 그림자 효과
</span>
</body>
</html>
실행 결과
끝.