کورس کی سفارش:

پچھلے پیمنے کو واپس جائیے CSS hypot() فنکنسی
آئندہ پیمنہ CSS invert() فنکنسی
پچھلے طبقے کو واپس جائیے سی ایس ایل فنکشن مراجع دکھانچہ

CSS inset() فنکشن

تعریف اور استعمال inset() CSS کا

inset() فنکشن کے ساتھ استعمال کی جاتی ہیں، جو ایک مستطیل کا تعریف کرتی ہیں، جو مرجع فریم کے ہر کی جانب کی مقررہ دوری کے ساتھ موجود ہوتا ہے。 clip-path فنکشن عام طور پر shape-outside صفت اور

صفت کا استعمال کریں۔

مثال

مثال 1

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  دو <div> عناصر کو مرجع فریم کے ہر کی جانب کی مقررہ دوری کے ساتھ مستطیل کے طور پر کیپ کریں:
}
clip-path: inset(15px);
  float: left;
  width: 150px;
  height: 100px;
  #pinkDIV {
  background-color: pink;
}

آپ خود کا کوشش کریں

clip-path: inset(5% 10% 15% 10% دوار 20px);

مثال 2 clip-path اور inset() آنیماشن کا اثر دیکھنے کے لئے استعمال کریں:

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

آپ خود کا کوشش کریں

مثال 3

کام میں استعمال کریں inset()،clip-path اور shape-outside:

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

آپ خود کا کوشش کریں

CSS گرامر

inset(length-percentage دوار border-radius)

مقدار	وصف
length-percentage	ضروری. 1 سے 4 تک پارامتر (طول یا فیصد)، جو مرجع فریم کے اوپر، دائیں، نیچے اور چپ کی کھلی کی دوری کو ظاہر کرتے ہیں。
دوار border-radius	اختیاری. داخلی مستطیل کو چکر کون میں رکھنا چاہئے یا نہیں کا معنای دینا。