box-shadow

1. 예제 코드

.header .header_tit h1 {

   font-size: 30px;color: #fff;background: #51b0dc;display: inline-block;padding: 5px 30px 5px 30px;
   font-weight: 900;transition: box-shadow 0.25s ease-in-out;}
.header .header_tit h1:hover {

  box-shadow: inset -9em 0 0 0 #257fac, inset 9em 0 0 0 #257fac;}
.header .header_tit a {

   font-size: 16px;color: #fff;background: #4a9abf; display: inline-block;padding: 10px 20px 10px 20px;

   margin-top: 10px;transition: box-shadow 0.25s ease-in-out;}
.header .header_tit a:hover{

   box-shadow: 0 0 0 5px rgba(75,154,191,0.9) inset, 0 0 0 100px rgba(0,0,0,0.1) inset; }

2. boxshadow

 

- 속성은 박스 요소의 그림자를 설정한다.

- 기본 문법 

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

/* h-shadow | v-shadow | color를 설정한 경우 */ box-shadow: 10px 20px #ccc; /* h-shadow | v-shadow | blur | color를 설정한 경우 */ box-shadow: 10px 20px 10px #ccc; /* h-shadow | v-shadow | blur | spread | color를 설정한 경우 */ box-shadow: 10px 20px 10px 10px rgba(0, 0, 0, 0.2); /* inset | h-shadow | v-shadow | blur | spread | color를 설정한 경우 */ box-shadow: inset 10px 20px 10px 10px rgba(0, 0, 0, 0.2); /* 두 가지 속성을 설정한 경우 */ box-shadow: 10px 20px #ccc, 10px 10px red;

- 속성값

none          : 박스 그림자를 적용하지 않는다.

h-shadow : 그림자의 수직(X축) 거리를 나타낸다.

v-shadow : 그림자의 수평(Y축) 거리를 나타낸다.

blur           : 그림자의 흐림 정도를 나타낸다.

spread      : 그림자의 거리를 나타낸다.

color         : 그림자의 색을 나타낸다.

inset         : 그림자를 내부에 적용할 수 있다.

inherit      : 그림자의 속성값을 상위요소에서 상속받는다.