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() 函數