وظيفة CSS inset()

التعريف والاستخدام

في CSS inset() تعريف وظيفة CSS، وهي تعريف مستطيل يكون على بعد محدد من كل جانب من الإطار المرجعي.

inset() الوظائف عادةً تستخدم clip-path الخصائص و shape-outside استخدام الخصائص معًا.

مثال

مثال 1

يقطع عناصر <div> الاثنين إلى مستطيلات تكون على بعد محدد من كل جانب من الإطار المرجعي.

#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% دائري 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 اختياري. تحديد ما إذا كان يجب أن يكون المربع الداخلي ذو زوايا مستقيمة.

تفاصيل التقنية

الإصدار: CSS Shape Module Level 1

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل لأول مرة.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

الصفحات ذات الصلة

المرجع:خصائص clip-path CSS

المرجع:خصائص shape-outside CSS

المرجع:وظيفة CSS circle()

المرجع:دالة ellipse() CSS

المرجع:دالة polygon() CSS