[css3] border-shadow - 그림자 효과 내기

티스토리 뷰

[개발]프로그래밍/css3

[css3] border-shadow - 그림자 효과 내기

좋은 블로그 2021. 4. 30. 10:04

1. 개념

border-shadow - 그림자 효과 내기

border-shadow는 원하는 요소에 그림자 효과를 내고자 할 경우에 사용

속성	설명
수평 거리	양수 값은 오른쪽으로 , 음수 값은 왼쪽으로 그림자를 만듬(필수)
수직 거리	양수 값은 아래쪽으로 , 음수 값은 위쪽으로 그림자를 만듬(필수)
흐림 정도	값이 커질수록 부드러운 그림자를 표시(음수 값은 없음)
번짐 정도	양수 값은 그림자를 모든 방향으로 퍼지게 크게 표시 음수 값은 그림자를 모든 방향으로 축소되어 표시(기본값 0)
색상	그림자의 색상 지정(기본값 현재 글자 색 - 없을시 검정색)
inset	안쪽으로 그림자를 그림(옵션 값)

2. 태그

border-shadow

html5 코드

<! DOCTYPE html>

<head>

</head>

<style>

div

{

margin-left : 20px ;

width : 100px ;

height : 100px ;

display : inline-block ;

border : 1px solid #000 ;

}

</style>

<body>

</body>

</html>

결과 화면

코드 설명

box-shadow : 2px 3px 5px 0px ;

첫번째 div에서는 따로 색상을 지정하지 않았습니다.
수평의 거리는 2px로 그림자를 그리고 수직의 거래는 아래쪽으로 3px 거리로 그림자를 만들고 있습니다.
그리고 번짐의 정도는 흐림 정도는 5px로 하고 번짐 정도는 기본값인 0px로 하였습니다.
따로 색상을 지정하지 않을 경우에는 검정색으로 그림자를 그리고 있음을 알 수 있습니다.

<box-shadow : 2px 3px 5px 0px blue ;

두번째 div는 첫번째 div에 다른 옵션는 모두 다 같습니다. 단지 색상을 blue로 지정함으로써 색상을 주었을 때와 주지 않았을 때의 차이점을 구분하고자 했습니다.

box-shadow : -5px -3px 0px 3px red ;

세번째 div는 음수로 표현해 보았습니다.
수평의 거리를 음수로 했을 경우에는 첫번째 div와 다른게 왼쪽으로 그림자가 그려지게 됩니다.
그리고 그 정도가 -5xp이기에 좀 더 그림자가 크게 보임을 확인할 수 있습니다.
수직의 거리는 -3px로 위쪽으로 그림자를 표시하고 있습니다.
흐림 정도는 0이고 번짐 정도를 3으로 했을 때 위에서의 세번째 div와 같이 그려지는 것을 확인하실 수 있습니다.

box-shadow : -5px -3px 0px 13px red ;

네번째 div는 세번째 div와의 번짐에 대한 정도 확인을 위해서 나머지 속성 값은 같고 번짐 정도만 13px로 설정하였습니다.
그래서 이와 같이 했을 때 확실히 세번째 div보다 네번째 div의 그림자가 더 크게 보이는 것을 확인 하실 수 있습니다.

box-shadow : -5px -3px 3px 3px red inset, 3px 2px 3px 3px blue ;

inset은 그림자를 바깥쪽으로 그려지는 것을 안쪽으로 그림자로 그려주는 것입니다.
그리고 콤마(,)를 사용해 다양하게 그림자를 표현할 수 도 있음을 확인하실 수 있습니다.

저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] padding - 내용과 테두리 사이의 여백 설정 (0)	2021.05.04
[css3] margin - 주변 여백 설정 (0)	2021.05.03
[css3] border-radius - 모서리 둥글게 만드는 속성 (0)	2021.04.29
[css3] border - 테두리 스타일 묶어 지정 (0)	2021.04.28
[css3] border-color - 테두리 색상 지정 (0)	2021.04.27

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

티스토리 뷰

[css3] border-shadow - 그림자 효과 내기

'[개발]프로그래밍 > css3' 카테고리의 다른 글

티스토리툴바