모서리, 그림자 효과

CSS3에 새롭게 추가된 효과로, 모서리 둥글게 만들기 등이 존재한다.

모서리 깎기

border radius 명령어를 사용한다.

아무것도 적용 안함.


border-radius:20px;


border-radius: 0px 10px 30px 60px;

이해가 안될수도 있어서 한번 적는다. 1, 2, 3, 4 순대로 왼쪽 상단부터 시계방향이다.

그림자 효과

box-shadow와 text-shadow로 나뉜다.

...-shadow : 가로 오프셋, 세로 오프셋, 그림자 번지는 정도, 그림자 색상;

다음과 같이 쓸 수 있다. 가로 오프셋은 음수일 시 왼쪽, 양수일 시 오른쪽. 그림자 번지는 정도는 반지름으로, 앞의 세 값 모두 픽셀값으로 넘겨야 한다.

box-shadow

선택한 요소에 그림자 효과를 추가한다.

text-shadow

선택한 글자 요소에 그림자 효과를 추가한다.

박정진 선생님 사랑해요!!

results matching ""

    No results matching ""