머리말: 제 기사 "매우 부드러운 둥근 모서리 프레임을 위한 준완벽한 솔루션"에서 저는 둥근 모서리 상자에 대한 7가지 솔루션을 요약했습니다. 이는 기본적으로 인터넷에서 인기 있는 둥근 모서리 상자 구현 솔루션을 요약한 것입니다. 그리고 나의 다른 기사 "Pictureless Peak Corner"에는 또 다른 대체 구현 방법이 있습니다.
순수 CSS로 둥근 모서리를 구현하는 것은 모두가 나쁘다고 말하는 이벤트입니다. 저도 요약 글을 두 개나 썼는데 왜 이런 글이 있는 걸까요? 이전 프로젝트에서는 배경 이미지를 사용하여 둥근 모서리를 구현하는 경우가 많았습니다. 그러나 이러한 프로젝트가 온라인에 출시되면 이전 프로젝트에서 널리 사용되었기 때문에 유지 관리 과정에서 몇 가지 새로운 요구 사항을 추가해야 하는 경우가 있었습니다. 코너 이미지가 사용되며 이러한 이미지는 모두 CSS 스프라이트를 사용하여 병합됩니다. 추가 작업을 추가하지 않고 JS를 사용하여 더 많은 http 요청을 추가하지 않으려면 이 문제를 해결하려면 몇 가지 간단한 CSS 솔루션이 필요합니다. 개인적으로 선호하는 점은 그림 없는 접근 방식을 사용하여 이러한 효과를 처리하는 것입니다. 나는 항상 CSS가 그 일을 할 수 있다고 생각합니다. 왜 그렇게 놔두지 않겠습니까?
구현 원리 :
순수한 CSS를 사용하여 둥근 모서리 상자를 구현하는 원리는 인터넷에서 많은 사람들에 의해 자세히 설명되었습니다. 아래 다이어그램은 둥근 모서리 중 하나를 확대한 후의 효과입니다.
위의 렌더링에서 우리는 이 둥근 상자가 실제로 컨테이너로 구성되어 있음을 알 수 있습니다. 각 컨테이너의 너비는 다음과 같이 여백에 의해 결정됩니다. 즉, 왼쪽의 여백입니다. 오른쪽은 5픽셀이고 위에서 아래로 5줄이 있으며 여백은 5px, 3px, 2px, 1px 순으로 줄어듭니다. 따라서 이 원칙을 바탕으로 간단한 HTML 구조와 스타일을 구현할 수 있습니다.
1. HTML 구조 레이어:
<div 클래스="샤프 컬러1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">텍스트 콘텐츠</div>
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
b1~b4는 위쪽에 두 개의 왼쪽 및 오른쪽 둥근 모서리 구조를 구성하고, b5~b8은 아래쪽에 두 개의 왼쪽 및 오른쪽 둥근 모서리 구조를 구성합니다. 콘텐츠는 콘텐츠의 본체입니다. 이를 모두 큰 컨테이너에 넣고 클래스 이름을 샤프하게 지정하여 공통 스타일을 설정합니다. 그런 다음 color1 클래스 이름이 겹쳐집니다. 이 클래스 이름은 다양한 색상의 둥근 모서리가 있을 수 있으므로 다양한 색상 구성표를 구별하는 데 사용됩니다.