집 >웹 프론트엔드 >CSS 튜토리얼 >CSS는 둥근 모서리를 얻기 위해 Sprites 기술을 사용합니다.

CSS는 둥근 모서리를 얻기 위해 Sprites 기술을 사용합니다.

不言원래의: 2018-06-28 11:17:392078검색

이 글은 주로 CSS Sprites 기술을 사용하여 둥근 모서리를 그리는 효과를 소개합니다. 이제는 특정 참조 값을 가지고 있으므로 도움이 필요한 친구들이 참조할 수 있습니다.

CSS Sprites 기술을 사용하여 둥근 모서리를 그립니다. 간단히 말해서, 그림에 원을 만들고 4개의 p를 정의합니다. 각 p는 그림의 모서리를 배경으로 사용합니다.

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

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

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

CSS는 둥근 모서리를 얻기 위해 Sprites 기술을 사용합니다.

2단계: HTML 코드 작성

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

<p class="roundedBox"></p>

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

<p class="roundedBox">
    <strong>My content in roundedBox Type 1</strong>
    <p class="corner topLeft"></p>
    <p class="corner topRight"></p>
    <p class="corner bottomLeft"></p>
    <p class="corner bottomRight"></p>
</p>

3단계: CSS 스타일 작성

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

모든 둥근 모서리를 먼저 정의합시다

모든 둥근 모서리는 절대 위치 지정으로 정의되어야 하며 높이와 너비가 표시되어야 합니다. 둥근 모서리로 정의된 너비와 높이는 모두 17픽셀입니다.

CSS는 둥근 모서리를 얻기 위해 Sprites 기술을 사용합니다.

.corner{position:absolute;width:17px;height:17px;}

이제 p 컨테이너 스타일을 정의해 보겠습니다.

.roundedBox {position:relative;}

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

.roundedBox {position:relative; padding:17px; margin:10px 0;}

필렛 없이 개별적으로 정의하겠습니다

각 원에 대해 수행합니다. 절대 위치 지정을 만듭니다. 모서리 설정 및 배경 이미지 위치 지정(스프라이트에 따라):

.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;} 
.topRight {top:0; right:0; background-position:-19px -1px;} 
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

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

#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}

전체 코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}
#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}
</style>
</head>
<body>
<p class="roundedBox" id="type1">
    <strong>My content in roundedBox Type 1</strong>
    <p class="corner topLeft"></p>
    <p class="corner topRight"></p>
    <p class="corner bottomLeft"></p>
    <p class="corner bottomRight"></p>
</p>
</body>
</html>

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS는 둥근 모서리를 얻기 위해 Sprites 기술을 사용합니다.

관련 기사