CSS inset() 函数

定义和用法

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)

技术细节

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

相关页面

参考：CSS clip-path 属性

参考：CSS shape-outside 属性

参考：CSS circle() 函数

参考：CSS ellipse() 函数

参考：CSS polygon() 函数