조회 수 259 추천 수 0 댓글 0

border-radius가 출현하면서 웹 디자이너들은 정말 열광했습니다 . 

이전까지는 둥근모서리를 만들기 위해 엄청난 편법과 기법들이 난무했습니다. 

이미지를 이용해서 둥근 모서리 만들기, 단순한 CSS만으로 둥근 모서리 만들기 등 둥근 모서리 박스를 만들기 위한 방법은 수 페이지에 걸쳐 설명한 책도 있었습니다.

 

하지만 CSS3가 출현하면서 간단한 코드만 입력해도 원하는 완벽한 둥근 모서리를 지닌 박스를 만들어 낼 수 있게 되었습니다. 기본적인 속성은 다음과 같이 지정되며 속성값은 보통 px, %, em으로 지정 합니다.

 

border-radius: 속성값;

 

border-radius 또한 방향성을 가지고 있기 때문에 다음과 같이 각 방향을 지정할 수 있습니다.

 

border-top-left-radius: 속성값;

border-top-right-radius: 속성 값;

border-bottom-left-radius: 속성 값;

border-bottom-right-radius: 속성 값;

 

IE를 제외한 FF4 또는 사파리5 등 최신버전의 브라우저가 아닐 때는 해당 브라우저에 맞는 스타일을 적용해야 합니다.

 

▶ 모질라 계열의 브라우저(파이어폭스)

  -moz-border-radius: 속성값;

▶ webkit을 이용한 브라우저(사파리, 구글 크롬)

  -webkit-border-radius: 속성값

▶ 모질라 계열의 방향성 지정 방식(웹 표준과는 조금 다릅니다)

  -moz-border-radius-topleft: 속성값;

  -moz-border-radius-topright: 속성값;

  -moz-border-radius-bottomleft: 속성값;

  -moz-border-radius-bottomright: 속성값;

▶ webkit 계열의 방향성 지정 방식(웹 표준과 같으나 앞쪽에 -webkit-을 붙여주는 차이)

  -webkit-border-top-left-radius: 속성값;

  -webkit-border-top-right-radius: 속성 값;

  -webkit-border-bottom-left-radius: 속성 값;

  -webkit-border-bottom-right-radius: 속성 값;


좀 더 이해하기 쉽게 그림으로 표현하면 <그림>와 같다.

brexpl2e.png
그림


좌우측 각 4개의 숫자값들은 생략이 가능한데,

숫자값이 하나만 주어지면, 이는 모서리 4곳의 radius 값이 모두 동일함을 의미한다.

    댓글이 하나도 없네요ㅠㅠ
    자료가 도움이 되었다면 댓글과 평가 부탁합니다.
?

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

List of Articles
번호 제목 글쓴이 날짜 조회 수
57 HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때 팔공산 2019.03.01 117
56 CSS 말줄임 처리하기 file 팔공산 2018.11.13 231
55 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 팔공산 2018.09.26 218
54 DIV 영역 자체에 링크 거는 방법 file 팔공산 2018.09.23 207
53 DIV 화면 정중앙에 박스 배치하기 file 팔공산 2018.09.19 112
52 DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; ) file 팔공산 2018.09.19 181
51 커서(cursor) 모양 정리 file 팔공산 2018.07.19 80
50 webkit-animation 적용 방법 file 팔공산 2018.01.31 189
49 각종 css3를 자동으로 만들어주는 사이트 팔공산 2017.11.07 311
48 html에 사용되는 Character Entities(특수기호) file 팔공산 2017.11.04 172
47 이미지 마우스 hover시 좌우 기울이기 file 팔공산 2017.10.27 207
46 모바일웹에서 스마트폰으로 전화바로연결 코드 file 팔공산 2017.06.16 1043
45 반응형 CSS 테이블 file 팔공산 2017.06.13 580
44 실시간 환율조회 html file 팔공산 2017.04.18 354
43 HTML 만으로 마우스오버 구현하는 방법 1 file 팔공산 2017.01.07 4822
42 <div> 와 같은 블록 요소를 가운데 정렬하는 방법 팔공산 2016.12.26 898
41 float 속성을 가진 div 100% 설정하는 방법 file 팔공산 2016.04.21 355
40 배경이미지 슬라이드 스크립트 팔공산 2016.04.19 1329
» CSS3 border-radius 이해하기 file 팔공산 2016.04.07 259
38 IE 버젼별로 css 따로 적용하는 방법 file 팔공산 2011.02.17 11725
목록
Board Pagination Prev 1 2 3 Next
/ 3
서버에 요청 중입니다. 잠시만 기다려 주십시오...