[css3] border-radius 속성(둥근 모서리)

 

 

[css3] border-radius 속성(둥근 모서리)

 

 

둥근 모서리를 만들 때 border-radius 속성을 사용합니다.

 

▶문법

 

border-radius:  :  길이값|% /  길이값|%

 

*길이값: px , cm, in, pt 등  

 

*기본값은 0

 

*길이값은 top-left, top-right, bottom-right, bottom-left 순임. (상단 왼쪽부터 시작하여 시계방향으로 돌아감)

 

*슬래시 앞이 수평 반지름, 슬래시 뒤가 수직 반지름이며

 

슬래시가 없을 경우, 수평, 수직이 동일하게 적용됩니다.

 

 

 

값이 1개 일 때 - 상,하,좌,우 동일한 값이 적용되며

 

값이 2개일 때- 첫번째 값이 top-left, bottom-right 두번째는 top-right, bottom-left

 

값이 3개일 때 - 첫번째 값이 top-left 두번째 값이 top-right, bottom-left 세번째 값이 bottom-right

 

 

예:

border-radius: 5px; 는 다음과 같음

 

border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;

 

각 모서리는 상,하,좌,우를 위 처럼 별도로 지정할 수도 있습니다.

 

 

 

예2:

 

border-radius: 40px 10px; 는 다음과 같음

 

border-top-left-radius:40px;
border-bottom-right-radius:40px;

border-top-right-radius:10px;
border-bottom-left-radius:10px;

 

 

예3:

 

border-radius: 10px 20px 50px; 는 다음과 같음

 

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:50px;

border-bottom-left-radius:20px;

 

 

 

예4:

 

border-radius: 10px/40px  는 다음과 같음

 

border-top-left-radius:10px 40px;
border-top-right-radius:10px 40px;
border-bottom-right-radius:10px 40px;
border-bottom-left-radius:10px 40px;

 

 

예 5:

border-radius: 5px 10px 20px / 10px 20px; 는 다음과 같음

 

border-top-left-radius:     5px 10px;
border-top-right-radius:    10px 20px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius:  10px 20px;

 

 

예 6:

 

border-radius: 50%

 

너비, 높이를 같게 하고  border-radius를 50% 백분율로 지정하면 동그란 원 모양이 됩니다.

 

border-radius.htm<=예제를 모두 볼 수 있는 파일

 

 

 

 

 

▶border-radius 속성 브라워지 지원 상세

 

border-radius  /*IE 9 +, Chrome 5.0+  Opera 10.5+, Safari 5+, Firefox 4+, iOS 4, Android 2.1+ */

 

 

▶접두어 버전

 

[css] 브라우저 업체별 접두어(vendor prefix)

 

 -moz-border-radius /* Firefox 1-3.6 */

 -webkit-border-radius /* Safari 3-4, chrome 4.0, iOS 1-3.2, Android 1.6- */

 

 

순서는 접두어 버전을 앞에 쓰고, 표준 속성을 맨 아래에 씀.

 

예:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

 

 

border-radius  css 코드 자동 생성기

 

아래 사이트에 접속하여 박스 상, 하, 좌,우 값을 입력하면 자동으로 css 코드를 만들어 줍니다.

(접두어 버전 포함)

 

http://www.css3maker.com/border-radius.html

http://border-radius.com/

 

 

 

 

background-clip 속성

 

opacity 속성(투명도 지정)

 

opacity 속성(투명도 지정)

 

rgba, opacity 차이