CSS로 둥근 상자 만들기

다음으로 고정된 너비와 고정되지 않은 너비를 가진 두 개의 DIV인 DIV에 포함된 두 개의 콘텐츠 영역을 포함하는 xHTML 페이지를 만듭니다. 이제 모서리가 둥근 DIV에 대한 페이지를 만듭니다. .

우리가 사용하는 이론은 요소에 배경을 추가할 때 배경 이미지가 항상 배경색 위에 표시된다는 것입니다. 단색의 둥근 사각형을 만들려면 먼저 일반 사각형을 만든 다음 둥근 모서리 그림을 사용할 수 있습니다. 이 요소의 네 개의 둥근 모서리 배경과 동일한 색상을 사용하여 둥근 모서리 프레임을 형성합니다. 이 방법은 고정 크기 상자와 고정 크기 상자 스트리밍의 두 가지 경우에 대해 아래에서 자세히 설명합니다.

고정 크기 상자에 둥근 모서리 추가 1단계: 기본 xHTML 문서를 만들고 여기에 약간의 콘텐츠 추가
일반 사본을 클립보드 인쇄로 보시겠습니까?

일반 사본을 클립보드 인쇄로 보시겠습니까?
본문, HTML {
여백:0;
패딩:0;
배경:#a7a09a;
색상:#000;
}

본문, HTML {
여백:0;
패딩:0;
배경:#a7a09a;
색상:#000;
}2단계: DIV의 너비와 배경색 설정
일반 사본을 클립보드 인쇄로 보시겠습니까?
div#fixedBox {
너비:340px;
여백:40px;
배경:#E4ECF9;
}

div#fixedBox {
너비:340px;
여백:40px;
배경:#E4ECF9;
}3단계: DIV의 너비를 기준으로 둥근 사각형을 만듭니다. DIV의 너비를 340px로 설정했으므로 이제 너비가 340px인 둥근 사각형을 만들어야 합니다. 직사각형을 만든 후 상단 부분을 배치합니다. 전체 직사각형의 아래쪽 부분을 잘라서 DIV 그림으로 사용했습니다. 다음 두 그림을 만들었습니다.

4단계: DIV 배경에 이미지 적용
일반 사본을 클립보드 인쇄로 보시겠습니까?
div#fixedBox {
너비:340px;
여백:40px;
background:#E4ECF9 url(images/bottom.gif) 반복되지 않는 하단 중앙;
}

div#fixedBox {
너비:340px;
여백:40px;
background:#E4ECF9 url(images/bottom.gif) 반복되지 않는 하단 중앙;
}div#fixedBox h2{
여백:0;
패딩:2px;
background:#E4ECF9 url(images/top.gif) 반복되지 않는 상단 중앙;
}

위에서는 DIV 하단에 Bottom.gif라는 이미지를 적용한 다음 DIV의 첫 번째 요소 H2에 Top.gif를 사용합니다. 물론 여기서 가장 먼저 주의해야 할 것은 추가할 수 없다는 것입니다. h2에 여백을 설정하거나 DIV에 패딩 또는 테두리를 추가합니다.

고정 너비가 아닌 둥근 상자 만들기 위에서 말한 내용은 고정 너비가 아닌 둥근 상자를 만드는 것입니다. 따라서 위쪽과 아래쪽의 그림이 필요합니다. 잠시 생각해보세요. 이번에는 어떤 방식으로든 축소할 수 있는 둥근 직사각형을 만들기 위해 각 모서리에 하나씩 4개의 그림을 사용해야 한다는 것을 알게 될 것입니다. 먼저 DIV 컨테이너를 만들어야 합니다. 기본 내용을 추가합니다.

1단계: xHTML 문서 만들기
일반 사본을 클립보드 인쇄로 보시겠습니까?

두 번째 단계는 둥근 모서리를 만드는 것입니다. 둥근 모서리는 왼쪽 위, 왼쪽 아래, 오른쪽 위, 오른쪽 아래 방향으로 이루어집니다.

3단계: DIVview 일반 복사본의 배경색을

클립보드 인쇄로 설정하시겠습니까?
div#flowBox {
여백:40px;
배경:#C3D9FF;
}

div#flowBox {
여백:40px;
배경:#C3D9FF;
} 5단계: 둥근 모서리 추가

너비와 높이가 고정되지 않은 DIV 컨테이너의 경우 둥근 모서리는 DIV의 너비와 높이 변경에 따라 위치를 변경할 수 있어야 하므로 고정된 모서리에만 둥근 모서리를 추가할 수 있습니다. -width DIV. 여기에 사용된 고정 너비 이미지는 두 개의 작은 이미지로 처리되며 H2 요소에 직접 추가될 수 있습니다. 이제 H2 요소를 추가한 후에는 둥근 모서리의 한 면만 얻게 됩니다. H2에서 사용할 수 있는 하나의 둥근 모서리 Span이 얻어지므로 두 개의 둥근 모서리가 해결되고 p 요소는 하나의 둥근 모서리를 제공할 수 있으며 div 자체에는 정확히 4개의 둥근 모서리가 있습니다.

일반 사본을 클립보드 인쇄로 보시겠습니까?
div#flowBox {
여백:40px;
background:#C3D9FF url(images/bottom-left.gif) 왼쪽 하단 반복 없음;
}

div#flowBox h2{
여백:0;
패딩:0;
background:#C3D9FF url(images/top-left.gif) 왼쪽 상단 반복 없음;
}

div#flowBox h2 스팬{
여백:0;
표시:블록;
background:#C3D9FF url(images/top-right.gif) 오른쪽 상단 반복 없음;
}

div#flowBox p{
여백:0;
패딩:0;
background:#C3D9FF url(images/bottom-right.gif) 오른쪽 하단 반복 없음;
}