CSS3 튜토리얼 (2): 웹 페이지 테두리 반경 및 웹 페이지 둥근 모서리_css3_CSS_웹 페이지

웹 페이지 제작 Webjx 기사 소개: 페이지에 둥근 모서리를 구현하는 것은 매우 번거로운 문제입니다. 구현 방법은 많지만 모두 상당히 번거롭습니다. 이 기사에서는 CSS3 border-radius를 사용하여 DIV의 둥근 모서리를 얻는 방법을 살펴보겠습니다. 페이지의 둥근 모서리를 구현하는 것은 매우 골치 아픈 문제입니다. 현재 구현 방법은 많지만 모두 상당히 골치 아픈 문제입니다. 이 기사에서는 CSS3 border-radius를 사용하여 DIV의 둥근 모서리를 얻는 방법을 살펴보겠습니다.

페이지에 둥근 모서리를 구현하는 것은 매우 번거로운 문제입니다. 구현 방법은 많지만 모두 상당히 번거롭습니다. 이 기사에서는 CSS3 border-radius를 사용하여 DIV의 둥근 모서리를 얻는 방법을 살펴보겠습니다. 브라우저 간 호환성

이전 기사 "CSS3 튜토리얼: CSS3란 무엇입니까?"에서 언급했듯이 모든 브라우저가 CSS3를 지원하는 것은 아니지만 더 나은 브라우저는 CSS3를 직접 지원하는 대신 호환되도록 선택합니다. 사용할 수 있는 두 가지 접두사가 있습니다.
접두사: Firefox의 경우
-moz(예: -moz-border-radius)
Safari 및 Chrome의 경우-webkit(예: -webkit-border-radius). CSS3 둥근 모서리(전체)
예전에는 이미지를 사용하지 않고 둥근 모서리를 만드는 기능이 매우 인기가 있었는데, 적절한 CSS 배경으로 사용할 완벽하고 작은 둥근 모서리 이미지를 만드는 것은 매우 시간이 많이 걸리는 작업이었습니다. 이제 CSS3를 사용하면 단 몇 줄의 코드만으로 둥근 모서리를 만들 수 있습니다.

이것은 5px 일반 테두리와 15px 테두리 반경의 설정입니다: #roundCorderC{font-family: Arial; border: 5px solid #dedede; border-radius: 15px; -webkit-border-radius: 15px; 높이: 상속; 너비: 590px; }

브라우저 지원:

Firefox(3.05…)
구글 크롬(1.0.154…)

구글 크롬(2.0.156…)

인터넷 익스플로러(IE7, IE8)

오페라 9.6

Safari(3.2.1 창) CSS3 둥근 모서리(개별)

물론 DIV의 네 모서리를 모두 둥글게 만들 필요는 없습니다.

#roundCornerI{ Font-family: Arial; border: 5px solid #dedede: -moz-border-radius-topright; : 0px; -moz-border-radius-bottomright: 0px; -webkit-border-top-right-radius: 0px ; -webkit-border-bottom-right-radius: 15px; 높이: 상속; 너비: 590px;

Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8)

Opera 9.6

Safari(3.2.1 windows)

위는 CSS3 튜토리얼 내용입니다(2): 웹페이지 테두리 반경 및 웹페이지 둥근 모서리_css3_CSS_ 웹페이지, 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!