CSS inset() fonksiyonu

Tanımı ve kullanımı

CSS'nin inset() Fonksiyonu, referans çerçevesinin her kenarı ile belirlenen iç içe mesafede bulunan bir düzgele tanımlar.

inset() Fonksiyonlar genellikle clip-path Özellik ve shape-outside Özellikler birlikte kullanılır.

Örnek

Örnek 1

İki <div> elementini, referans çerçevesinin her kenarı ile belirlenen iç içe mesafede tutarlı bir düzgele keser:

#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);
}

Deneyin

Örnek 2

Kullanarak clip-path ve inset() Animasyon etkisi oluşturma:

#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);}
}

Deneyin

Örnek 3

birlikte kullanılır inset(),clip-path ve 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);
}

Deneyin

CSS语法

inset(length-percentage round border-radius)

Teknik ayrıntılar

Tarayıcı desteği

Tabloda gösterilen rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü belirtir.

İlgili sayfa

Referans:CSS clip-path özelliği

Referans:CSS shape-outside özelliği

Referans:CSS circle() fonksiyonu

Referans:CSS ellipse() fonksiyonu

Referans:CSS polygon() fonksiyonu