• Q&A
  • 회원가입
  • 로그인

[shadow] CSS - box-shadow 속성 - 상자그림자 (= box-shadow속성 = 박스그림자 = 요소그림자 = 요소음영 = 박스섀도, IE9)

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.

IE9 이상 주요 최신브라우저 지원

 

2.

기본값 :  none
상속 여부 :  X
애니 효과: 가능
CSS 버전: CSS3
JS 구문: object.style.boxShadow="10px 20px 30px pink"

 

box-shadow 구문


box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;



[속성값]


none

기본값. shadow 효과 적용 안 함.

 

h-offset

필수.  가로길이. (예: 10px)

양수: 요소 오른쪽에 위치.
음수: 요소 왼쪽에 위치.

 

v-offset

필수.  세로길이. (예: 10px)

양수: 요소 아래쪽에 위치.
음수: 요소 위쪽에 위치. 

 

blur 

선택. 흐릿함. (예) 10px
값이 클수록 번짐 정도 커짐.

 

spread 

선택. 퍼지는 정도.
양수: 그림자 크기 키움.
음수: 그림자 크기 줄임.

 

color 

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

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

 

inset

선택. 그림자를 외부 그림자 (처음)에서 내부 그림자로 변경.

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소 속성값 상속.

 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012