CSS inset() — прямокутна обрізка для clip-path

Опис

Функція inset() в CSS є потужним інструментом для налаштування відстані між границями елемента та його контейнера. Ця функція дозволяє вам точно задавати положення границь елемента з урахуванням його верхньої, правої, нижньої та лівої сторін.

Для використання функції inset() потрібно передати значення в довжині або відсотках. Параметри функції вказують відстані від відповідних границь (верхньої, правої, нижньої, лівої). Ви можете вказати відстань від будь-якої з границь, і при цьому функція використовуватиме значення auto для невказаних границь.

Приклад використання функції inset():

.element {
  inset: 10px 20px 10px 20px;
}

У даному прикладі ми використовуємо функцію inset() для встановлення відстані від границь елемента з класом .element. Параметри функції вказують, що відстань від верхньої границі буде 10 пікселів, від правої границі - 20 пікселів, від нижньої границі - 10 пікселів і від лівої границі - 20 пікселів.

Інші приклади значень inset():

• inset(10px): Відстань від границь елемента 10 пікселів на всіх сторонах.
• inset(10px 20px): Відстань від верхньої та нижньої границь - 10 пікселів, від правої та лівої границь - 20 пікселів.

правити

Загальний опис

правити

Порада

Використовуйте позитивні значення для встановлення відстані від границь елемента до його контейнера.

автор: Bond правити

Порада

Можна використовувати від'ємні значення, щоб змістити границі елемента всередині його контейнера.

автор: Bond правити

Порада

Використовуйте auto для автоматичного визначення відстані від границь.

автор: Bond правити

Нотатка

Функція inset() дозволяє точно налаштовувати відстань від границь елемента, надаючи вам більшу гнучкість у створенні дизайну вашого веб-сайту.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

inset( <length-percentage> [ <length-percentage> | auto ]? )

Функція inset може отримувати 2 значень:

<length-percentage>

Значення в довжині або відсотках, яке вказує відстань від границі елемента. Може бути позитивним або від'ємним числом.

автор: Bond

правити

auto

Автоматичне визначення відстані від границі. Значення auto можна використовувати для автоматичного розташування границі елемента.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	37	54	10.1	24	79

Підтримка: мобільні переглядачі

Переглядач
	37	37	54	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Приклад використання функції inset()</h2>
  <p>Наведіть курсор на квадрат, щоб побачити зміну.</p>
</div>
<div id="result">
  <div class="square"></div>
</div>

#description {
  font-style: italic;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: flex;
  justify-content: center;
}

.square {
  background-color: yellow;
  width: 150px;
  height: 150px;
  clip-path: inset(100px 150px round 20px);
  transition: clip-path 0.5s ease;
}

.square:hover {
  clip-path: inset(150px 100px round 5px);
}

<div id="description">
  <h2>Приклад 2: Елементи з різними границями</h2>
  <p>Один з елементів використовує функцію inset() для встановлення відстані від границь елемента відносно його контейнера.</p>
</div>

<div id="result">
  <div class="image-container">
    <div class="box"></div>
    <div class="box withinset"></div>
  </div>
</div>

#description {
  background-color: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.image-container {
  display: flex;
}

.box {
  width: 200px;
  height: 200px;
  margin-right: 20px;
  background-color: red;
}

.withinset {
  clip-path: inset(4rem 20% round 1rem 2rem 3rem 4rem);
}

<div id="description">
  <h2>Що робить inset() у clip-path</h2>
  <p>Блоки однакові — 160×160 з градієнтом. Пунктир показує, де блок був до обрізання.</p>
</div>

<div id="result">
  <div class="demo">
    <div class="frame"><div class="box"></div></div>
    <p>без clip-path</p>
  </div>
  <div class="demo">
    <div class="frame"><div class="box b2"></div></div>
    <p>inset(20px)</p>
  </div>
  <div class="demo">
    <div class="frame"><div class="box b3"></div></div>
    <p>inset(10% 25% round 24px)</p>
  </div>
  <div class="demo">
    <div class="frame"><div class="box b4"></div></div>
    <p>inset(60%) — порожньо</p>
  </div>
</div>

#description {
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 30px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.demo p {
  margin: 8px 0 0;
  font: 13px/1.4 monospace;
  text-align: center;
  color: #555;
}

.frame {
  width: 160px;
  height: 160px;
  border: 1px dashed #999;
}

.box {
  width: 160px;
  height: 160px;
  background-image: linear-gradient(135deg, #2f6fed, #16a34a);
}

.b2 { clip-path: inset(20px); }
.b3 { clip-path: inset(10% 25% round 24px); }
.b4 { clip-path: inset(60%); }