box-shadow 속성
CODEDRAGON ㆍDevelopment/Web, WWW
반응형
box-shadow 속성
선택한 요소에 그림자 효과 추가하기
|
box-shadow : inset 5px -5px 10px 15px #000000; |
|
구분 |
설명 |
|
inset |
· 박스의 그림자가 안쪽으로 퍼지게 합니다 |
|
5px |
· 가로 오프셋 거리 (가로로 밀리는 폭) · 그림자가 가로로 얼마나 떨어져 있는지 지정 · 양수값은 요소의 오른 쪽에 그림자 표시 · 음수값은 요소의 왼쪽에 그림자 표시 |
|
-5px |
· 세로 오프셋 거리 (세로로 밀리는 폭) · 그림자가 세로로 얼마나 떨어져 있는지 지정. · 양수값은 요소의 아래에 그림자 표시 · 음수값은 요소의 위쪽에 그림자 표시 |
|
10px |
· blur radius · 그림자의 번지는 정도를 지정. · 0이 최소값이며 이 값을 생략하면 번지는 효과를 사용하지 않습니다. |
|
15px |
· 그림자와 박스의 거리 |
|
#000000 |
· 그림자 색상을 지정 · 16진수로 된 색상값, 색상 이름이나 RGB 값 모두 사용가능 · rgba(red, green, blue, 투명도) |
반응형
'Development > Web, WWW' 카테고리의 다른 글
| list(리스트), 리스트 종류-순서 없는 리스트(Unordered Lists). 순서 있는 리스트(Ordered Lists), type속성, 마커(marker) (0) | 2017.06.14 |
|---|---|
| 브라우저별 CSS 차이 확인하기 (0) | 2017.06.14 |
| border-radius 프로퍼티, border-radius 속성값, border-radius 속성 형식 (0) | 2017.06.14 |
| border - 테두리 관련 프로퍼티 (0) | 2017.06.14 |
| border-color 프로퍼티 (0) | 2017.06.14 |