Функция CSS `inset()`

inset() — это функция CSS, которая задаёт прямоугольник на указанных расстояниях отступов от каждой стороны исходного блока. Это функция базовой фигуры, используемая для определения одного из <basic-shape> типов данных.

Попробуйте

clip-path: inset(30px);

clip-path: inset(1rem 2rem 3rem 4rem);

clip-path: inset(20% 30% round 20px);

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

Синтаксис

shape-outside: inset(20px 50px 10px 0 round 50px);
border-shape: inset(10px 20px 10px 20px round 20px);

Значения

<length-percentage>{1,4}

Если указаны все четыре аргумента, они задают верхний, правый, нижний и левый отступы внутрь от исходного блока, определяя положение сторон прямоугольника отступа. Для этих аргументов используется синтаксис сокращённой записи свойства margin, которая позволяет задать все четыре отступа с помощью одного, двух или четырёх значений.

Если сумма пары отступов по одному измерению превышает 100% этого измерения, оба значения пропорционально уменьшаются так, чтобы их сумма составляла 100%. Например, значение inset(90% 10% 60% 10%) задаёт верхний отступ 90% и нижний отступ 60%. Эти значения пропорционально уменьшаются до inset(60% 10% 40% 10%). Такие фигуры, не охватывающие никакой области и не имеющие shape-margin, не влияют на обтекание.

<border-radius>

Необязательный аргумент (или аргументы) <border-radius> задаёт скруглённые углы прямоугольника отступа с помощью синтаксиса сокращённой записи border-radius.

Формальный синтаксис

<inset()> = 
  inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Пример базового inset

В примере ниже фигура inset() используется, чтобы расположить содержимое поверх плавающего элемента. Измените значения отступов, чтобы увидеть, как меняется фигура.

<div class="box">
  <div class="shape"></div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>

.box {
  width: 400px;
  margin: 0 auto;
}

.shape {
  float: left;
  width: 150px;
  height: 100px;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
  background-color: coral;
  border-radius: 20px;
  margin: 0;
  padding: 20px;
}

Спецификации

Совместимость с браузерами

См. также

• Свойства, использующие этот тип данных: border-shape, clip-path, shape-outside
• модуль CSS Shapes
• Руководство по базовым фигурам