CSS inset() فونکشن

صفحه قبل CSS hypot() فونكشن
صفحه بعدی CSS invert() فونکشن
برگشت به طبقه بالا Kwamko da Function da CSS

تعریف و استفاده

CSS inset() فونکشن تعریف می‌کند یک مستطیل که با هر یک از اضلاع جعبه مرجع به فاصله مشخص درونی نگه داشته می‌شود.

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% round 20px);
}

آزمایش کنید

مثال 2

استفاده از clip-path و inset() تأثیر جلوه‌های حرکت:

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

آزمایش کنید

مثال 3

با هم استفاده می‌شوند inset()،clip-path و 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);
}

آزمایش کنید

نحوه نوشتن CSS

inset(length-percentage round border-radius)

مقادیر	توضیحات
length-percentage	ضروری. 1 تا 4 پارامتر (طول یا درصد)، که اختلافات با بالای، سمت راست، پایین و سمت چپ جعبه مرجع را نشان می‌دهد.
round border-radius	اختیاری. مشخص می‌کند آیا مستطیل درونی باید دارای قطرات گرد باشد یا خیر.