HTML DOM box-shadow 속성은 요소의 프레임 내부 또는 주변에 그림자를 가져오거나 설정하는 데 사용됩니다.
다음은 −
의 구문입니다.boxShadow 속성 설정하기 -
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
속성 값은 다음과 같이 설명됩니다 -
| 값 | 설명 |
|---|---|
| 없음 | 기본값이며 그림자를 표시하지 않습니다. |
| h-오프셋 | 이것은 그림자가 수평 오프셋에서 얼마나 멀리 떨어져 있는지 지정합니다. 이것은 필수 값이며 양수 값은 그림자가 상자의 오른쪽에서 올 것임을 나타내고 음수 값은 상자의 왼쪽에서 오는 것을 의미합니다. |
| v-오프셋 | 그림자가 수직 오프셋에서 얼마나 멀리 떨어져 있는지 지정합니다. 이것은 필수 값이며 양수 값은 그림자가 상자의 아래쪽에서 오는 것을 의미하고 음수 값은 상자의 위쪽에서 오는 것을 의미합니다. |
| 흐림 효과 | 흐림 반경을 지정합니다. |
| 확산 | 확산 반경을 지정합니다. |
| 색상 | 그림자 색상을 지정합니다. |
| 삽입 | 이렇게 하면 요소의 외부에서 내부로 그림자가 생깁니다. |
| 초기 | 이 속성을 초기 값으로 설정합니다. |
| 상속 | 상위 속성 값을 상속하려면 |
boxShadow 속성의 예를 살펴보겠습니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 100px;
width: 100px;
box-shadow: 10px 10px 3px orange;
}
</style>
<script>
function changeBoxShadow(){
document.getElementById("DIV1").style.boxShadow="1px 10px 10px 10px green";
document.getElementById("Sample").innerHTML="The box shadow is changed now ";
}
</script>
</head>
<body>
<div id="DIV1">This is a sample div</div>
<p>Change the above div border width by clicking the below button</p>
<button onclick="changeBoxShadow()">Change Box Shadow</button>
<p id="Sample"></p>
</body>
</html> 출력
"상자 그림자 변경"을 클릭하면 버튼 -
