[css3] box-shadow 속성(그림자 효과)

 

 

[css3] box-shadow 속성(박스 그림자 효과)

 

box-shadow 속성은 박스 요소에 그림자를 넣는 속성입니다.

 

 

▶문법

 

box-shadow: none |  h-shadow v-shadow blur spread color | inset

 

none 기본값으로, 그림자가 표시되지 않음

h-shadow 필수 지정. 수평 그림자 위치.

               양수 값을 지정하면 박스 오른쪽에 그림자가 드리워지며, 음수 값은 박스 왼쪽에 그림자가 드리워짐

v-shadow 필수 지정. 수직 그림자 위치. 

               양수 값은 박스 위쪽에 그림자가 드리워지며, 음수 값은 박스 아래 쪽에

 

blur 선택 지정, 그림자의 흐림 정도.

       0으로 지정하면 그림자가 진하고, 숫자가 높아질수록 점점 흐릿해짐(양수값만 허용)

spread 선택 지정. 그림자가 드리워지는 정도.

           양수값은 그림자가 커지며, 음수값은 작아짐. 그림자는 blur와 같은 크기

 

spread와 blur 영역의 차이

 

 이미지: http://www.w3.org/TR/css3-background/#the-box-shadow

 

 

color 선택 지정. 그림자 색깔

        ie9, firefox, opera 기본값은 검은색이며, 
        safari, chrome은 color 값을 지정하지 않으면 그림자가 생기지 않음.

inset. 선택 지정. 바깥 그림자(outset)에서 안쪽 그림자로 바꿈.

initial 초기화
 

상속여부 : no

 

 

▶사용 법

 

#test{

box-shadow: 10px 10px 10px 20grey;

}

 

접두어 버전과 함께 쓸 경우 표준 속성을 맨 아래에 씀

#test {
-moz-box-shadow: 10px 10px 10px 20grey;
-webkit-box-shadow: 10px 10px 10px 20grey;
box-shadow: 10px 10px 10px 20grey;
}

 

 

h-shadow(필수), v-shadow(필수), blur(선택), spread(선택), color(선택) 순으로 지정합니다.

(길이값 px, pt, in 등의 단위 사용)

 

그리고 inset을 선택적으로 추가할 수 있습니다.

 

쉼표로 분리하여 여러 개의 그림자를 지정 할 수도 있습니다.

 

div{

box-shadow: 64px 64px 24px 40px gfey,12px 12px 0px 18px grey inset;

}

 

▶브라우저 지원 상세

 

ie9+, chrome 10.0+(4.0 -webkit), firefox4.0+(3.5 -moz-), safari 5.1+(3.1 -webkit), opera 10.5+

 

 

▶주의

 

box-shadow는 레이아웃에 영향을 미치지 않아서, 주변에 다른 박스가 있을 때 겹쳐 보입니다.

 

다수의 box-shadow가 있을 때, 그림자는 앞에서 뒤 순으로 적용 됩니다(첫번째 그림자가 앞, 그 다음이 뒤)

 

또한, outer 그림자는 요소의 배경 바로 밑에 드리워지고

 

inner 그림자는 배경 바로 위에 드리워집니다.  (border와 border image가 있다면 그 아래에 드리워짐)

 

 

html/css 작성 예를 보겠습니다~

실행 화면은 아래 파일 다운 받아 확인하세요~

box-shadow.htm

html

<div id="test">
<h3>box-shadow: 10px 10px grey; </h3>
 </div>

 

 

css

div{
width:300px;
height:100px;
padding:10px;
margin: 30px;
border: 1px solid black;
}
#test{
box-shadow: 10px 10px grey;
}

 

▶실행화면

 

h-space:10px, v-space: 10px, color: grey 임

 

css

#test_1{
box-shadow: -10px -10px grey;
}

 

 

h-space:-10px, v-space: -10px, color: grey 임

 

css

#test2{
box-shadow: 10px 10px 20px grey ;
}

 

 

h-space:10px, v-space: 10px, blur:20px, color: grey 임

 

css

#test3{
box-shadow: 10px 10px 20px 5px grey ;
}

 

 

h-space:10px, v-space: 10px, blur:20px, spread:5px, color: grey 임

 

 

css

#test4{
box-shadow: 10px 10px 20px 5px grey inset;
}

 

h-space:10px, v-space: 10px, blur:20px, spread:5px, color: grey, inset 임

 

css

#test5{

border: 1px solid rgba(102, 186, 255, 0.4);

box-shadow: 0px 0px 20px 10px rgba(102, 186, 255, 0.4);
}

 

  

css

#test6{
border: 20px solid green;
background-color: #B2CCFF;
border-top-left-radius:60px 90px;
border-bottom-right-radius:60px 90px;
box-shadow:64px 64px 24px 40px rgba(0,0,0,0.4),12px 12px 0px 18px rgba(0,0,0,0.4) inset;
}

 

 

css

#test8{
box-shadow: 10px 10px #BCE55C, 20px 20px #CEF279, 30px 30px #E4F7BA;
} 

 

 

background-origin 속성

 

border-radius 속성(둥근 모서리)

 

background-clip 속성

 

blockquote 태그(인용문 꾸미기 5가지)