728x90
300x250
box-shadow:none | 그림자값
그림자값 = <수평 거리> <수직거리> <흐림정도> <번짐정도> <색상> inset
수평거리와 수직거리는 반드시 지정해야 하고 나머지 속성값은 옵션사항이라 필요할 때 사용하면 됩니다.
box-shadow 속성
수평거리(필수속성) | 그림자의 수평거리(수평으로 얼마나 떨어져 있는지) 양수값은 대상의 오른쪽, 음수값은 요소의 왼쪽 |
수직거리(필수속성) | 세로로 얼마나 떨어져 있는지 양수값은 대상의 아래쪽, 음수값은 대상의 위쪽 그림자 표시 |
흐림정도 | 값이 커질수록 그림자가 부드러워지고 생략하면 기본값이 0이 되면서 진한 그림자를 표시한다. 그림자를 표시하면 음수값은 사용할 수 없다. |
번짐정도 | 양수값은 그림자가 모든 방향으로 퍼져나가고 음수값은 모든방향으로 축소되어져서 보인다. 기본값은 0으로 설정된다. |
색상 | 한가지 색상으로 표현할 수 있고 공백으로 구분해서 여러개로 색상을 지정하 ㄹ수도 있다. 기본값은 현재 글자색 |
inset | 안쪽 그림자로 그림 |
예제
box1 {
-webkit-box-shadow: 1px 2px 10px 1px rgba(0,0,0,.2);
box-shadow: 1px 6px 10px 0px rgba(0,0,0,.2);
}
.box2 {
box-shadow: 1px 5px 10px 5px grey;
}
728x90
반응형
'Front-end > CSS' 카테고리의 다른 글
css 변수 기본 사용법 (0) | 2021.10.27 |
---|---|
[css] flex-flow, flex-direction, flex-wrap (0) | 2021.10.17 |
[css] word-break (0) | 2021.08.12 |
css3 추가된 글꼴 속성 (0) | 2021.08.06 |
css 배경 투명하게 (0) | 2021.08.05 |
댓글