오늘 우리는 CSS3 기술을 사용하여 이미지 없이 둥근 모서리를 얻는 방법을 배우고 있습니다. CSS3를 사용하여 사이드바 제목 배경의 둥근 모서리 효과와 검색 상자의 둥근 모서리 효과를 얻을 수 있습니다. 나중에 사용할 수 있도록 기록해 두십시오. W3C는 CSS 둥근 모서리를 구현하는 CSS3 속성인 border-radius를 오랫동안 공식화해 왔습니다. Firefox와 Safari도 개인 속성을 통해 이 기능을 구현합니다.
<div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >Firefox 및 Safari는 둥근 모서리를 구현합니다< /div>
효과는 다음과 같습니다.
그 중 -moz-border-radius는 둥근 모서리를 구현하기 위해 Firefox에서 사용하는 비공개 속성이고, -webkit-border-radius는 둥근 모서리를 구현하기 위해 웹킷 핵심 브라우저(예: Safari 및 Chrome)에서 사용하는 비공개 속성입니다. 특정 모서리가 둥글도록 지정하기만 하면 됩니다. 각도의 경우 모두 네 가지 속성을 정의합니다.
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-국경-반지름-하단왼쪽 / -webkit-국경-하단-왼쪽-반경
-moz-국경-반경-하단 오른쪽 / -webkit-국경-하단-오른쪽-반경
물론 IE(IE8 포함)에서는 아직 지원하지 않기 때문에 파이어폭스, 사파리, 크롬에서만 효과를 볼 수 있다.