[그래픽 처리] 둥근 모서리/border-radius

 

[그래픽 처리] 둥근 모서리/border-radius

이전에는 사각형의 모서리를 둥글게 하기 위해서 그림파일을 이용할 수 밖에 없었습니다.
하지만 CSS3에서는 border-radius 속성 값을 지정하는 것만으로도 구현할 수 있습니다.
형태는 아래와 같습니다.

-webkit-border-radius : 15px;

 

위의 코드를 실행하면 사각형의 모서리가 둥그렇게 바뀝니다.
'box1'은 그냥 빨간 사각형을 둥글게하였습니다.
'box2'는 둥근 모서리 효과를 주고 그라데이션까지 주었습니다.
그라데이션 효과는 다음 파트에서 좀더 자세히 다루겠습니다.
'box3'도 똑같이 둥근 모서리 효과를 주었습니다. 그리고 그림자를 추가하였네요.