Rumah > Artikel > hujung hadapan web > Ketahui ciri CSS baharu: Limpahan keratan berarah:klip
Artikel ini akan memperkenalkan ciri baharu, bermula daripada Chrome 90, ciri limpahan baharu - overflow: clip
, gunakannya untuk mengawal arah limpahan dengan mudah.
Pertama, mari kita perkenalkan secara ringkas penggunaan overflow: clip
.
overflow: clip
: Ungkapan sangat serupa dengan overflow: hidden
, dan turut menjepit padding-box
elemen. [Belajar perkongsian video: tutorial video css, bahagian hadapan web]
Walau bagaimanapun, mereka mempunyai dua perbezaan:
Maksudnya, sebarang bentuk penatalan adalah dilarang sama sekali di dalam overflow: clip
. Sudah tentu, ini bukan tumpuan hari ini, jadi mari kita langkaunya buat masa ini.
MDN Teks asal: Perbezaan antara klip dan tersembunyi ialah kata kunci klip juga melarang semua penatalan, termasuk penatalan terprogram.
overflow: clip
boleh mengawal pemangkasan dari arah paksi x dan y, tetapi overflow: hidden
tidak boleh.
Itulah maksudnya. Mari kita jelaskan secara ringkas:
Mari kita lihat prestasi overflow: clip
dan overflow: hidden
tanpa membezakan arah Format:
<div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div> <div class="hidden"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div> <div class="clip"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div>
.hidden { overflow: hidden; } .clip { overflow: clip; }
Kami menyediakan 3 bekas DIV, satu daripadanya tidak menetapkan limpahan, dan dua lagi set masing-masing overflow: clip
dan overflow: hidden
. Kesannya adalah seperti berikut:
Pada masa ini, prestasi overflow: clip
dan overflow: hidden
adalah konsisten.
overflow: clip
boleh ditetapkan secara individu pada paksi x/y Walau bagaimanapun, perkara yang menjadikan overflow: clip
unik ialah ia boleh ditetapkan secara individu pada x- paksi Atau paksi-y, supaya bekas mempunyai keupayaan untuk memangkas dalam arah tertentu, sambil membenarkan limpahan ke arah yang bertentangan.
Lihat DEMO ini:
Fenomena di sini perlu diperhatikan:
Tetapan tunggaloverflow-x: hidden
atau overflow-y: hidden
, bentuk ungkapan adalah konsisten dengan overflow: hidden
, ia ialah pemangkasan bulat
dan overflow-x: clip
/ overflow-y: clip
dalam x mendatar atau menegak y arah sepadan dengan arah lain overflow-x: visible
, ia boleh membenarkan limpahan dalam satu arah dan memangkas dalam satu arah!
Dua perkara di atas perlu dijelaskan:
Tetapan overflow: hidden
akan mencipta BFC, jadi tiada cara untuk mengehadkan sahaja satu arah; danoverflow: clip
BFC tidak akan dibuat, jadi mereka akan menghasilkan ketidakkonsistenan dalam banyak persembahan (contohnya)
Apabila limpahan-x/y ditetapkan kepada tersembunyi, limpahan- y/x akan bertukar menjadi auto, walaupun ia ditetapkan kepada boleh dilihat
Untuk DEMO lengkap, anda boleh klik di sini: Demo CodePen -- limpahan: tersembunyi & limpahan: klip
Pada ketika ini, kami telah mencapai kesan yang membenarkan pemangkasan sehala unsur dalam arah x/y, seperti ini:
(Rajah di atas membenarkan Limpahan paksi-x dalam arah, dan pemotongan dalam arah paksi-y)
Baiklah, jika anda pergi lebih jauh . Sebagai contoh, jika terdapat keperluan bahawa limpahan dibenarkan di arah atas, kiri dan kanan, tetapi pemangkasan diperlukan ke arah bawah, adakah ini boleh dicapai?
Jawapannya ya.
Sebenarnya terdapat banyak cara untuk memangkas elemen dalam CSS, yang boleh menganggarkan fungsi yang serupa dengan overflow: hidden
.
Sebagai contoh, kita boleh menggunakan clip-path
untuk mencapai pemangkasan satu arah ke atas, bawah, kiri dan kanan. Ini adalah kandungan artikel saya sebelum ini - Cara melaksanakan limpahan: tersembunyi tanpa menggunakan limpahan: tersembunyi Jika anda berminat, anda boleh lihat.
Alamat asal: https://www.cnblogs.com/coco1s/p/16627152.html
Pengarang: ChokCoco
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !
Atas ialah kandungan terperinci Ketahui ciri CSS baharu: Limpahan keratan berarah:klip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!