CSS는 둥근 모서리를 달성하기 위해 Sprites 기술을 사용합니다. 경험 교환

먼저 스프라이트(Sprites)란 웹 이미지 애플리케이션 처리 방식에 대해 간단히 설명하겠습니다. 페이지에 포함된 흩어져 있는 모든 그림을 하나의 큰 그림으로 포함할 수 있으므로 해당 페이지에 액세스할 때 로드된 그림이 이전처럼 하나씩 표시되지 않습니다. 현재 널리 사용되는 네트워크 속도의 경우 200KB를 초과하지 않는 단일 이미지에 필요한 로딩 시간은 기본적으로 동일하므로 이 문제에 대해 걱정할 필요가 없습니다.

1단계: 스프라이트 만들기

PS 등의 도구를 이용하여 사진과 같이 사진을 합성합니다(1픽셀의 빨간색 선으로 구분)

2단계: HTML 코드 작성

먼저 컨테이너 div에 .roundedBox 클래스를 제공합니다.

코드 복사 코드는 다음과 같습니다.

이제 앞으로 둥근 모서리를 만들 때 사용할 div를 4개 더 추가해야 합니다. 그런 다음 각 클래스에 대해 .corner 클래스를 로드해야 하며 클래스를 식별하여 그리드 위치를 지정해야 합니다.

코드 복사 코드는 다음과 같습니다.

roundedBox 유형 1의 내 콘텐츠

3단계: CSS 스타일 작성

절대적으로 배치된 요소는 일반적으로 상대적으로 배치된 상위 요소에 따라 배치됩니다. 상위 요소를 정의할 수 없는 경우 가장 최근에 상대적으로 배치된 상위 요소(body 태그까지)로 이동합니다.

먼저 모든 필렛을 정의해 보겠습니다

모든 필렛은 절대적인 위치에 있어야 하며 높이와 너비가 표시되어 있어야 합니다. 내 필렛 정의의 너비와 높이는 모두 17픽셀입니다.

코드 복사 코드는 다음과 같습니다.

.corner{위치:절대;너비:17px;높이:17px;}

이제 div 컨테이너 스타일 정의를 시작하세요.

코드 복사 코드는 다음과 같습니다.

.roundedBox {위치:상대적;}

.roundedBox 클래스로 정의된 요소 내에서 절대 위치에 있는 요소는 레이블 본문이 아닌 이 요소를 기준으로 위치가 지정됩니다. 또한 일부 패딩 값을 설정해야 합니다. 설정하지 않으면 둥근 모서리가 텍스트를 덮게 되며 이는 확실히 우리가 원하는 효과가 아닙니다. 중요: 상단 및 하단 패딩 값은 필렛 높이와 동일해야 합니다. 왼쪽 및 오른쪽 패딩 값은 필렛 너비와 동일해야 합니다. 이미 알고 있듯이 필렛의 너비와 높이가 동일하므로 네 모서리의 패딩 값도 동일합니다.

코드 복사 코드는 다음과 같습니다.

.roundedBox {위치:상대; 패딩:17px; 여백:10px 0;}

둥근 모서리가 없는 것에 대해 별도의 정의를 내리자

각 둥근 모서리의 절대 위치를 설정하고 배경 이미지의 위치를 ​​지정합니다(스프라이트에 따라).

코드 복사 코드는 다음과 같습니다.

.roundedBox {위치:상대; 패딩:17px; 여백:10px 0;}
.corner {위치:절대; 너비:17px;}
.topLeft {상단:0; 왼쪽:0; 배경 위치:-1px -1px;}
.topRight {상단:0; 오른쪽:0; 배경 위치:-19px -1px;}
.bottomLeft {하단:0; 왼쪽:0; 배경 위치:-1px -19px;}
.bottomRight {하단:0; 오른쪽:0 배경 위치:-19px -19px;}

마지막으로 스프라이트의 둥근 모서리와 혼합되도록 배경색을 #type1에 ​​일치시킵니다.

코드 복사 코드는 다음과 같습니다.

#type1 {배경색:#CCDEDE;}
#type1 .corner {배경-이미지:url(../image/corners.gif);}

모든 코드:

코드 복사 코드는 다음과 같습니다.

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

본문>