[shadow] CSS - box-shadow 속성 - 요소 그림자 효과 주기 (= box-shadow속성 = 박스섀도속성) ※ 요소 주위에 음영효과 주기 ※ 박스그림자

1. box-shadow 예제 - 요소 그림자
2. box-shadow 정의
3. box-shadow 구문
4. 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 

선택. 그림자 색깔. (기본값: 글자색과 동일)

• 주의: 사파리 PC버전에선 필수값임.

 

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