Функция CSS inset()

Определение и использование

CSS inset() Функция определяет прямоугольник, который на каждом côtéReference рамки имеет заданное внутреннее расстояние.

inset() Функции обычно используются с clip-path Свойства и shape-outside Свойства вместе использовать.

Ин实例

Пример 1

Срезать два элемента <div> до прямоугольника, который на каждом côtéReference рамки имеет заданное внутреннее расстояние:

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

Технические детали

Поддержка браузерами

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

См. также

См. также:Свойство clip-path CSS

См. также:Свойство shape-outside в CSS

См. также:Функция CSS circle()

См. также:Функция ellipse() в CSS

См. также:Функция polygon() в CSS