CSS는 둥근 모서리를 얻기 위해 Sprites 기술을 사용합니다.-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

不言

Jun 28, 2018 am 11:17 AM

css둥근 모서리

이 글은 주로 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 Flexbox vs Grid : 포괄적 인 검토May 12, 2025 am 12:01 AM

Flexbox 또는 그리드 선택은 레이아웃 요구 사항에 따라 다릅니다. 1) Flexbox는 탐색 표시 줄과 같은 1 차원 레이아웃에 적합합니다. 2) 그리드는 매거진 레이아웃과 같은 2 차원 레이아웃에 적합합니다. 두 사람은 프로젝트에 사용하여 레이아웃 효과를 향상시킬 수 있습니다.

CSS 파일 포함 방법 : 방법 및 모범 사례May 11, 2025 am 12:02 AM

CSS 파일을 포함시키는 가장 좋은 방법은 태그를 사용하여 HTML 부분에 외부 CSS 파일을 소개하는 것입니다. 1. 태그를 사용하여 외부 CSS 파일을 소개합니다. 2. 작은 조정의 경우 인라인 CSS를 사용할 수 있지만주의해서 사용해야합니다. 3. 대규모 프로젝트는 SASS와 같은 CSS 전 처리기를 사용하여 @Import를 통해 다른 CSS 파일을 가져올 수 있습니다. 4. 성능의 경우 CSS 파일을 병합하고 CDN을 사용해야하고 CSSNANO와 같은 도구를 사용하여 압축해야합니다.

Flexbox vs Grid : 둘 다 배워야합니까?May 10, 2025 am 12:01 AM

예, YoushouldLearnbothflexBoxAndgrid.1) FlexBoxisIdealforone-Dimensional, FlexiblelayoutSlikenavigationMenus.2) GridexCelsIntwo-Dimensional, ComplexDesignsSuchasmagazinElayouts.3) 결합 된 BothenSlayoutFlexibility 및 HeartingFortructur

궤도 역학 (또는 CSS 키 프레임 애니메이션을 최적화하는 방법)May 09, 2025 am 09:57 AM

자신의 코드를 리팩터링하는 것은 어떤 모습입니까? John Rhea는 자신이 쓴 오래된 CSS 애니메이션을 선택하고 최적화하는 사고 과정을 살펴 봅니다.

CSS 애니메이션 : 만들기가 어렵습니까?May 09, 2025 am 12:03 AM

cssanimationsarenherinly에 hardbutreepracticenderstandingofcsspropertiesandtimingflestions.1) startsimpleants withsimpleatslikeScalingabuttononHoverusingKeyframes.2) useAsingfuctionslikecubic-bezierfornateffects, 그러한 분위기, 3)

@keyframes CSS : 가장 많이 사용되는 트릭May 08, 2025 am 12:13 AM

@keyframesispopularduetoitstativerstatility 및 powerincreatingsmoothcssanimations.keytricksinclude : 1) states 사이에 moothtransitionsbettites, 2) 애니메이션 multiplepropertiessimultory, 3) vendorPixesforBrowsercompatibility, 4) 빗질을 사용하여

CSS 카운터 : 자동 번호 매기기에 대한 포괄적 인 안내서May 07, 2025 pm 03:45 PM

csScounterSearedTomanageAutomaticNumberingInberingInwebDesigns.1) 1) theCanbeusedfortablestoffContents, ListItems 및 CustomNumbering.2) AdvancedUsesInSinestedNumberingsystems.3) CreativeUseNvolvecust를 CreativeSinvolecust.4) CreativeSinvolvecust

스크롤 구동 애니메이션을 사용한 현대 스크롤 그림자May 07, 2025 am 10:34 AM

특히 모바일 장치에 스크롤 그림자를 사용하는 것은 Chris가 이전에 다룬 미묘한 UX입니다. Geoff는 애니메이션 타임 라인 속성을 사용하는 새로운 접근 방식을 다루었습니다. 또 다른 방법이 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.