CSS 3으로 둥근 모서리 만들기 - 이전 버전을 사용하여 둥근 모서리가있는 상자를 만든 경우

CSS, 이미지 및 HTML 표의 이전 버전을 사용하여 모서리가 둥근 상자를 만들었 으면 얼마나 고통 스러운지 알 수 있습니다. 각 모서리에 대해), 모서리가 나란히 정렬되도록 조심스럽게 모든 것을 조정해야했던 방법 (999). 이전 기법을 사용했는지 여부와 관계없이 CSS 3 속성 border-radius를 사용할 때 둥근 모서리를 만드는 것이 얼마나 쉬운 지 알 수 있습니다.

border-radius를 사용할 때 반올림의 길이를 둥근 모서리를 만드는 값으로 지정합니다. 그런 다음 둥근 모서리를 원하는만큼 둥글게 만들 수 있으며 상자의 일부 또는 모든 모서리에 스타일을 적용 할 수 있습니다. 여기서 반경을 변경하면 곡선 모서리가 어떻게 바뀌는 지 확인하는 데 도움이되는 다이어그램을 볼 수 있습니다.

태그 또는

태그와 같은 상자 객체에 테두리 반경을 적용 할 수 있습니다. WebKit 브라우저에서 CSS 3에 둥근 모서리를 만들기위한 구문은 다음과 같습니다 (r은

radius, 원 중심에서 곡선 모서리까지의 거리를 나타냅니다). -webkit-border-radius: r 길이;

각 모서리마다 다른 반경을 지정하려는 경우 스타일이 다음 코드와 비슷하게 보일 수 있습니다. 이 그림에서 둥근 모서리가 오른쪽 위 및 왼쪽 아래 모서리에만 적용되는 경우 값의 변경 방법을 볼 수 있습니다.

-webkit-border-top-left-radius: 0; -webkit-border-top-right-radius: 25px; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 25px;

-webkit-border-radius: 50px 100px;

반경을 두 값으로 지정하면 반경을 훨씬 더 많이 제어 할 수 있습니다.

다음 예제에서, 반올림의 한 글꼴 높이가 텍스트에 축척을 유지하도록 상자에 추가되었습니다. em 단위를 측정 단위로 사용하면 iPhone과 iPad 모두에서 규모를 유지할 수 있습니다. 이는 헤드 라인과 같이 텍스트 요소 주위에 둥근 모서리를 추가하려는 경우에 유용합니다.

-webkit-border-radius: 1em; 이 예에서 그림자와 그라디언트도 사용되었습니다. CSS 3을 사용하여 그림자를 추가 할 수 있습니다.