CSS Clip-Path 속성 소개-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS Clip-Path 속성 소개

Joseph Gordon-Levitt

Feb 21, 2025 am 08:29 AM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Clip-Path: Shaping Web Elements</title>
    <style>
        body {
            font-family: sans-serif;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .intro-image {
            width: 500px;
            height: auto;
        }
        .section-title {
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 1em;
        }
        .code-example {
            background-color: #f0f0f0;
            padding: 1em;
            border-radius: 5px;
            margin-bottom: 1em;
            overflow-x: auto; /* Add horizontal scroll if needed */
        }
        .code-example pre {
            margin: 0;
        }
        .image-example {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 2em;
        }
        .image-example img {
            max-width: 100%;
            height: auto;
        }
        .key-takeaway {
            margin-bottom: 2em;
        }
        .key-takeaway ul {
            list-style-type: disc;
            padding-left: 20px;
        }
        .faq-section {
            margin-top: 3em;
        }
        .faq-section h2 {
            font-size: 1.8em;
            font-weight: bold;
            margin-bottom: 1em;
        }
        .faq-section .faq-item {
            margin-bottom: 1em;
        }
        .faq-section .faq-item h3 {
            font-weight: bold;
            margin-bottom: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174009775169997.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Introducing the CSS clip-path Property " />
    </div>

    <p>The web's predominantly rectangular layout contrasts with print media's diverse shapes.  This difference stems partly from a lack of suitable tools. This tutorial introduces <code>clip-path</code>, a CSS property offering the design flexibility of print.</p>

    <div class="key-takeaway">
        <h2 id="Key-Takeaways">Key Takeaways</h2>
        <ul>
            <li><code>clip-path</code> masks parts of an element, exceeding the limitations of the deprecated <code>clip</code> property (rectangular clipping only).</li>
            <li>It supports basic shapes, geometry boxes, or SVG <code><clippath></code> URLs for complex shapes and animations.</li>
            <li>Animating <code>clip-path</code> requires matching vertex counts in initial and final shapes for smooth transitions.</li>
            <li>While not universally supported, major modern browsers (Chrome, Safari, Opera) support <code>clip-path</code> (often with prefixes). Firefox support is partial.</li>
        </ul>
    </div>

    <h2 id="The-Basics">The Basics</h2>
    <p>Clipping trims parts of an element, partially or fully hiding it.  The <i>clipping path</i> defines the visible region, whether a simple shape or a complex polygon.  The <i>clipping region</i> is the area within this path.  Anything outside is hidden, including backgrounds, borders, shadows, and events.</p>
    <p>Even with non-rectangular elements, surrounding content flows naturally. For shape-aware content flow, use the <code>shape-outside</code> property (see related SitePoint tutorial).</p>
    <p>Remember: <code>clip-path</code> differs from the limited, deprecated <code>clip</code> property.</p>

    <h2 id="Syntax-and-Usage">Syntax and Usage</h2>
    <p>The syntax is: <code>clip-path: <clip-source> | [<basic-shape> || <geometry-box>] | none</code></p>
    <ul>
        <li><code><clip-source></code>: An SVG <code><clippath></code> URL.</li>
        <li><code><basic-shape></code>: Basic shape functions (CSS Shapes spec).</li>
        <li><code><geometry-box></code>: (Optional) Reference box for <code><basic-shape></code>, or defines the clipping shape itself (e.g., <code>margin-box</code>).</li>
    </ul>

    <div class="code-example">
        <pre class="brush:php;toolbar:false"><code>img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

이것은 마름모꼴을 만듭니다. 정점 좌표 (x, y)는 요소 상자에 비해 시계 방향입니다.

로 클리핑

`geometry-box`

여기,

<code>.clip-me {
  clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
  margin: 10%;
}
        </code>

는 참조입니다. svg 요소는 ,

또는 를 사용합니다 margin-box 의 사용 텍스트와 이미지를 향상시킵니다. 복잡한 모양은 쉽게 달성 할 수 있습니다. fill-box stroke-box view-box

`clip-path`

이미지 갤러리와 아바타

clip-path

애니메이션 추가

애니메이션

이지만 부드러운 전환을 위해 일관된 정점 계수를 유지합니다.

<code>.p-msg {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%);
}
        </code>

브라우저 지원 즉, 가장자리는 지원이 부족합니다. Firefox에는 부분 지지대가 있습니다 (

구문, 플래그를 통해 잠재적으로 활성화). Chrome, Safari 및 Opera에는

접두사가 필요합니다. 최신 정보를 확인할 수 있습니까?

결론

<code>.right {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position: relative;
  top: -352px;
  left: 256px;
}
        </code>

는 상당한 설계 가능성을 제공합니다. Clippy 및 CSS 플랜트의 클립 경로 발전기와 같은 도구 복잡한 다각형 생성을 단순화합니다.

자주 묻는 질문 (FAQS)

CSS Clip-Path 속성은 무엇이며 어떻게 작동합니까?

디스플레이 영역을 정의하면 요소의 일부를 차단합니다. 기본 모양, 지오메트리 상자 또는 SVG 경로를 허용하여 복잡한 모양과 애니메이션을 가능하게합니다.

clip-path CSS 클립 경로에서 다각형 함수를 어떻게 사용할 수 있습니까?

함수는 (x, y) 좌표 쌍을 사용하여 다각형의 정점을 정의합니다. 예를 들어,

<code>@keyframes polygons {
  25% {
    clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);
  }
  50% {
    clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);
  }
  70% {
    clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);
  }
}
        </code>

는 다이아몬드를 만듭니다

응답 디자인에 CSS 클립 경로 속성을 사용할 수 있습니까? 예, 요소 크기로 스케일링하기 위해 모양 매개 변수의 백분율을 사용하십시오.

CSS Clip-Path 속성을 애니메이션 할 수 있습니까? 예, 키 프레임과 속성을 사용합니다. 정점 수를 부드러운 전환을 위해 일관되게 유지하십시오

CSS Clip-Path 속성을 지원하는 브라우저는 무엇입니까? 대부분의 최신 브라우저가 지원합니다 (업데이트를 위해 사용할 수있는 확인).

animation

CSS 클립 경로에서 원 함수를 어떻게 사용할 수 있습니까?

원을 만듭니다. 예를 들어,

는 요소 내의 원을 중심으로합니다

CSS에서 SVG를 클립 경로로 사용할 수 있습니까? 예,

함수를 사용하여 svg 요소를 참조하십시오.

CSS에서 클립과 클립 경로의 차이점은 무엇입니까?
는 더 이상 사용되지 않으며 직사각형 클리핑 만 지원합니다. 는 훨씬 더 다재다능합니다. `circle(radius at position)` `clip-path: circle(50% at 50% 50%)` CSS 클립 경로에서 삽입 함수를 어떻게 사용할 수 있습니까?

옵션 둥근 모서리가있는 사각형을 만듭니다

단일 CSS 클립 경로에서 여러 모양을 사용할 수 있습니까?

예, SVG Path Syntax와 함께

함수를 사용합니다 url() <clippath></clippath>

위 내용은 CSS Clip-Path 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

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

뜨거운 도구

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

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.