Memperkenalkan harta tanah klip CSS
<!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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174009775169997.jpg" 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%); }
Ini mewujudkan rombus. Koordinat Vertex (x, y) adalah mengikut arah jam, berbanding dengan kotak elemen.

Keratan dengan geometry-box
<code>.clip-me { clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box; margin: 10%; } </code>
di sini, margin-box
adalah rujukan. Elemen SVG menggunakan fill-box
, stroke-box
, atau view-box
.
Kegunaan clip-path
clip-path
Meningkatkan teks dan imej. Bentuk kompleks mudah dicapai.

<code>.p-msg { clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%); } </code>
galeri imej dan avatar mendapat manfaat daripada bentuk bukan kubah.
<code>.right { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); position: relative; top: -352px; left: 256px; } </code>
Menambah Animasi
Animate clip-path
, tetapi mengekalkan kiraan puncak yang konsisten untuk peralihan yang lancar.
<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>
Sokongan penyemak imbas
IE dan kelebihan kekurangan sokongan. Firefox mempunyai sokongan separa (url()
sintaks, berpotensi didayakan melalui bendera). Chrome, Safari, dan Opera memerlukan -webkit-
awalan. Semak bolehkah saya menggunakan untuk maklumat terkini.
Kesimpulan
menawarkan kemungkinan reka bentuk yang penting. Alat seperti penjana jalur klip clippy dan CSS memudahkan penciptaan poligon kompleks. clip-path
memotong bahagian elemen, menentukan rantau paparan. Ia menerima bentuk asas, kotak geometri, atau laluan SVG, membolehkan bentuk dan animasi kompleks. clip-path
fungsi
menggunakan pasangan menyelaras (x, y) untuk menentukan simpul poligon. Sebagai contoh, polygon()
mencipta berlian. clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
Ya, gunakan peratusan dalam parameter bentuk untuk berskala dengan saiz elemen.
Adakah mungkin untuk menghidupkan harta clip-path CSS?
Ya, menggunakan kekunci kekunci dan harta animation
. Pastikan kiraan vertex konsisten untuk peralihan yang lancar.
penyemak imbas apa yang menyokong harta clip-path CSS?
Pelayar yang paling moden menyokongnya (periksa boleh saya gunakan untuk kemas kini).
bagaimana saya boleh menggunakan fungsi bulatan dalam clip-path css?
circle(radius at position)
Mewujudkan bulatan. Sebagai contoh, clip-path: circle(50% at 50% 50%)
memusatkan bulatan dalam elemen.
bolehkah saya menggunakan svg sebagai laluan klip dalam css?
ya, menggunakan fungsi url()
untuk merujuk elemen SVG <clippath>
.
Apakah perbezaan antara klip dan klip-laluan dalam CSS?
clip
ditolak dan hanya menyokong keratan segi empat tepat. clip-path
jauh lebih serba boleh.
bagaimana saya boleh menggunakan fungsi inset dalam clip-path css?
inset(top right bottom left [round border-radius])
mencipta segi empat tepat dengan sudut bulat pilihan.
bolehkah saya menggunakan pelbagai bentuk dalam satu clip-path css?
Ya, menggunakan fungsi path()
dengan sintaks laluan SVG.
Atas ialah kandungan terperinci Memperkenalkan harta tanah klip CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas











Saya melihat Font Google melancarkan reka bentuk baru (tweet). Berbanding dengan reka bentuk besar yang terakhir, ini terasa lebih berulang. Saya hampir tidak dapat memberitahu perbezaannya

Pernahkah anda memerlukan pemasa undur dalam projek? Untuk sesuatu seperti itu, mungkin semula jadi untuk mencapai plugin, tetapi sebenarnya lebih banyak lagi

Semua yang anda ingin tahu mengenai atribut data dalam HTML, CSS, dan JavaScript.

Tartan adalah kain berpola yang biasanya dikaitkan dengan Scotland, terutamanya kilt bergaya mereka. Di Tartanify.com, kami mengumpulkan lebih dari 5,000 Tartan

Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula

Arahan template inline membolehkan kita membina komponen Vue yang kaya sebagai peningkatan progresif ke atas markup WordPress yang sedia ada.

Templat PHP sering mendapat rap buruk untuk memudahkan kod subpar - tetapi itu tidak perlu berlaku. Mari kita lihat bagaimana projek PHP dapat menguatkuasakan asas

Kami sentiasa mencari untuk menjadikan web lebih mudah diakses. Kontras warna hanya matematik, jadi Sass dapat membantu menutup kes -kes kelebihan yang mungkin dilewatkan oleh para pereka.
