목차
- box-shadow 예제 - 요소 그림자
- box-shadow 정의
- box-shadow 구문
- box-shadow 예제 - 이미지 허버 시, 음영 주기
box-shadow 예제 - 요소 그림자
<style>
body {padding:30px;}
div {margin-bottom:50px;}
#ex1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px;
}
#ex2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px blue;
}
#ex3 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px 18px red;
}
#ex4 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px 5px 10px green;
}
#ex5 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px blue, 5px 10px 18px red, 5px 10px 5px 10px green;
}
</style>
<h3>box-shadow: 5px 10px:</h3>
<div id="ex1">
<p>box-shadow:가로 세로</p>
<p>홈짱닷컴 Homzzang.com</p>
</div>
<h3>box-shadow: 5px 10px blue:</h3>
<div id="ex2">
<p>box-shadow:가로 세로 색깔</p>
<p>홈짱닷컴 Homzzang.com</p>
</div>
<h3>box-shadow: 5px 10px 18px red:</h3>
<div id="ex3">
<p>box-shadow:가로 세로 흐릿 색깔</p>
<p>홈짱닷컴 Homzzang.com</p>
</div>
<h3>box-shadow: 5px 10px 5px 10px green:</h3>
<div id="ex4">
<p>box-shadow:가로 세로 흐릿 퍼짐 색깔</p>
<p>홈짱닷컴 Homzzang.com</p>
</div>
<h3>box-shadow: 5px 10px blue, 5px 10px 18px red, 5px 10px 5px 10px green:</h3>
<div id="ex5">
<p>box-shadow:정의1, 정의2, 정의3; (여러 개 한꺼번에 정의)</p>
<p>홈짱닷컴 Homzzang.com</p>
</div>
결과 보기
box-shadow 정의
요소에 그림자 (= 음영) 효과 주기.
1.
- 기본값: none
- 상속여부: X
- 애니효과: 가능
- CSS버전: CSS3
- JS구문: object.style.boxShadow="10px 20px 30px pink"
2. cf. 이미지 자체에 그림자효과 주기
selector {filter: drop-shadow(5px 5px 5px #000);}
3.
IE9 이상 주요 최신 브라우저 지원.
box-shadow 구문
selector {box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;}
[속성값]
none
기본값. shadow 효과 적용 X
h-offset
필수. 가로길이. (예: 10px)
- 양수: 요소 오른쪽에 위치
- 음수: 요소 왼쪽에 위치
v-offset
필수. 세로길이. (예: 10px)
- 양수: 요소 아래쪽에 위치
- 음수: 요소 위쪽에 위치
blur
선택. 흐릿함. (예) 10px
spread
선택. 퍼지는 정도.
- 양수: 그림자 크기 키움
- 음수: 그림자 크기 줄임
color
선택. 그림자 색깔. (기본값: 글자색과 동일)
inset
선택. 그림자를 외부 그림자 (처음)에서 내부 그림자로 변경.
initial
이 속성의 기본값으로 설정.
inherit
부모요소 속성값 상속.
box-shadow 예제 - 이미지 허버 시, 음영 주기
<style>
img {transition: all 0.2s linear;}
img:hover {box-shadow: 0px 0px 30px rgba(0,0,0,0.6);}
</style>
<img src="https://i.imgur.com/WfW5mBC.png" alt="홈짱닷컴">
결과보기
관련글: (230130) https://sir.kr/qa/488251