توابع inset() CSS

صفحه قبلی توابع hypot() CSS
صفحه بعدی توابع invert() CSS
برگشت به لایه بالاتر دستورالعمل‌های مرجع توابع 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% گرد 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	اختیاری. مشخص می‌کند آیا مستطیل درونی باید دارای گوشه‌های گرد باشد یا خیر.