Rekomendasi Kursus:

Fungsi inset() CSS

Definisi dan penggunaan CSS inset() Fungsi menentukan persegi panjang yang berjarak dalam penghubungan dengan setiap sisi boks referensi.

inset() Fungsi biasanya digunakan bersama dengan clip-path Properti dan shape-outside Kombinasikan properti.

Contoh

Contoh 1

Mengguncang dua elemen <div> sehingga diiris menjadi persegi panjang yang berjarak dalam penghubungan dengan setiap sisi boks referensi yang ditentukan:

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(15px);
}
#pinkDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: pink;
  clip-path: inset(5% 10% 15% 10% round 20px);
}

Coba sendiri

Contoh 2

Pakai clip-path dan inset() Menciptakan efek animasi:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: inset(10% round 20px);
}
@keyframes mymove {
  50% {clip-path: inset(50% round 50px);}
}

Coba sendiri

Contoh 3

digunakan bersama-sama inset()、clip-path dan shape-outside:

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
}

Coba sendiri

Syntaks CSS

inset(length-percentage round border-radius)

Detil teknis

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung fungsi ini penuh.

Halaman yang berhubungan

Referensi：Properti clip-path CSS

Referensi：Atribut shape-outside CSS

Referensi：Fungsi circle() CSS

Referensi：Fungsi ellipse() CSS

Referensi：Fungsi polygon() CSS