X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

무료 프리미엄 액세스

프리미엄 허브 기사, 프로젝트 파일 및 각 튜토리얼 비디오의 첫 번째 10 %의 우리의 전체 라이브러리를 액세스 온라인 자습서 도서관 .

지금 무료 계정을 만드십시오!

CSS3의 레이아웃 객체에 둥근 모서리를 만들어
Google 번역에 의해 번역

당신이 일을하지 않은 경우 많은의 새로운 기능에 아직 읽기 CSS3 , 그것은 엄청 멋지죠. 그라디언트, 다중 열, 국경 이미지, 하나의 우리가 국경 반경 여기를 한 번 봐 얘기 하겠소을 포함하여 새로 도입 가능성을 모든 종류의이 있습니다. 국경 반경은 우리가 웹 레이아웃에 달리 사각형 개체에 대한 둥근 모서리를 설정할 수 있습니다.

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

1 단계 - CSS3 테두리 반경을 적용

첫째, 이제 국경 반경을 적용하자. 스타일 시트에, 당신이 반올림 모서리 효과를 적용하고자하는 규칙을 찾습니다. 종종,이 사업부 요소를 제어의 ID를 선택됩니다. 확실히 당신도 모서리를 볼 수 있도록 또한 배경색이나 테두리 (또는 둘 모두) 적용임을 확인!

다음 값은 다음 규칙에 "국경 반경"속성을 추가합니다. 높은 사용 가치는 더 모서리를 둥글게.

당신은 포함된 스크린샷에서 볼 수 있듯, 여기, 내가, 내 페이지의 콘텐츠를 보유하고있는 사업부를 관리하는 내 # 콘텐츠 ID 선택기에 국경 반경을 적용 해요. 작업을 저장하고 브라우저에서 작업을 체크 아웃해야합니다.

그래도 90도 구​​석을 받고있다면 브라우저는이 기능을 지원하지 않는 하나입니다. 그러나 아직의 일을 팩을하지 않습니다. 의 내가 앞서 언급한 그 멋진 트릭을 확인해 보자.

2 단계 - 둥근 코너의 효과를 보장 작동

언급했듯이, 인기 브라우저에만 최신 버전은 CSS3의 국경 반경 속성을 지원합니다. 어떻게 당신의 레이아웃은 여전히​​ 버전 또는 두 뒤에있는 브라우저를 사용하는 사용자를 위해 작동되도록 수 있습니까? 당신은 몇 가지 추가 코드를 사용할 수 다음과 같은.

첫째,에 추가하자 "- moz - 국경 - 반경 :"반경 값으로 따라갔다. 특히 파이어 폭스 - 이것은 도마뱀 붙이 브라우저로 불리는 어떤 대상으로하고 있습니다.

다음에 추가하자 "- 웹킷 - 국경 - 반경 :"우리는 위에서 사용한 것과 같은 값으로 따라갔다. 이것은 크롬과 사파리와 같은 웹킷 기반의 모든 브라우저를 공격할 겁니다. 일단 추가, 작업을 저장하고 브라우저를 새로 고치십시오.

3 단계 - 예외 규칙을 증명

자, 이제는 Internet Explorer, 모든 웹 디자이너 좋아하는 브라우저 (SIC)에 대해 뭘 물어? 음, 위의 모든 옵션이 작동하지 않습니다. 사실, 우리가이 시점까지 추가한 코드는 단순히 Explorer에 의해 무시되고, 모서리는 단순히 지금, 그들의 기본적으로 그것이 휴식하는 데보다 낫다 90도 스타일링을 렌더링? 그것은 IE의 둥근 모서리를 당겨 있지만, 추가 작업의 비트인지 알 수 있습니다, 그리고 아마 우리가 미래 팁에 들어갈 수 있죠. 당분간,하지만, 모든 다른 브라우저에 둥근 모서리를 즐겨보세요!

CSS는 훌륭합니다. 더 살펴보기 부동의 CSS 레이아웃을 설계 .


Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link