CSS inset() 函数

定义和用法

CSS 的 inset() 函数定义了一个矩形，该矩形与参考框的每一边保持指定的内嵌距离。

inset() 函数通常与 clip-path 属性和 shape-outside 属性一起使用。

实例

例子 1

将两个

元素裁剪为与参考框每一边保持指定内嵌距离的矩形：

#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)
值 描述
length-percentage 必需。1 到 4 个参数（长度或百分比），表示与参考框的顶部、右侧、底部和左侧的偏移量。
round border-radius Inayowezekana. Inaangalia inayotakiwa kuwa kikuu cha eneo la kijana kina inayotakiwa kuwa kikuu cha kina kina.

Vifungu vya habari vya teknolojia

Muungano: Moduli ya Kikuu ya Kifungu cha CSS

Mafanikio ya vifungu vya vihoma

Mafanikio ya vifungu vya vihoma inaeza kueleza na kumefikia kina ya kufungua kwa kina cha kwanza cha kufungua kwa vifungu hivi.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

Sayari za mawasiliano

Marejeo:Mfano wa CSS clip-path

Marejeo:Hisia ya CSS shape-outside

Marejeo:Funguza kikuu ya CSS

Marejeo:Faa CSS ellipse()

Marejeo:Faa CSS polygon()