rect()

語法

offset-path: rect(0 1% auto 3% round 0 1px);
clip-path: rect(50px 70px 80% 20%);

值

內嵌矩形透過指定四個偏移值來定義，從頂部邊緣偏移開始，然後順時針方向，以及一個可選的 round 關鍵字和 border-radius 引數來為矩形新增圓角。每個偏移值可以是 <length>、<percentage> 或關鍵字 auto。

<length-percentage>

指定矩形頂部、右側、底部或左側邊緣到包含塊頂部或左側邊緣的距離的 <length-percentage> 值。第一個（頂部）和第三個（底部）值是距離包含塊頂部邊緣的距離，第二個（右側）和第四個（左側）值是距離包含塊左側邊緣的距離。第二個（右側）和第三個（底部）值分別被第四個（左側）和第一個（頂部）值限制，以防止底部邊緣越過頂部邊緣，右側邊緣越過左側邊緣。例如，rect(10px 0 0 20px) 被限制為 rect(10px 20px 10px 20px)。

auto

使使用此值的邊緣與包含塊的相應邊緣重合。如果第一個（頂部）或第四個（左側）值使用 auto，則 auto 的值為 0；如果第二個（右側）或第三個（底部）值使用 auto，則 auto 的值為 100%。

round <'border-radius'>

使用與 CSS border-radius 簡寫屬性相同的語法指定矩形圓角的半徑。此引數是可選的。

正式語法

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )  

示例

使用 rect() 建立 offset-path

在此示例中，offset-path 屬性使用 rect() 函式來定義元素（此處為紅色框）移動的路徑形狀。顯示了三種不同的場景，每種場景都為 rect() 函式使用了不同的值。框內的箭頭指向框的右邊緣。

<div class="container">
  Rectangular path 1
  <div class="path rect-path-1">→</div>
</div>
<div class="container">
  Rectangular path 2
  <div class="path rect-path-2">→</div>
</div>
<div class="container">
  Rectangular path 3
  <div class="path rect-path-3">→</div>
</div>

.container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 15px;
  text-align: center;
}

.path {
  width: 40px;
  height: 40px;
  background-color: red;
  position: absolute;
  animation: move 10s linear infinite;
}

.rect-path-1 {
  offset-path: rect(50px 150px 200px 50px round 20%);
}

.rect-path-2 {
  offset-path: rect(50px auto 200px 50px round 20%);
}

.rect-path-3 {
  offset-path: rect(50px auto 200px auto);
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

結果

• 路徑 1 矩形指定了四個邊緣（頂部、右側、底部和左側）與包含塊的距離。頂部和底部值是距包含塊頂部邊緣的距離。右側和左側值是距包含塊左側邊緣的距離。此外，矩形的拐角以 20% 的弧度圓角，使紅色框元素在沿此路徑移動時跟隨圓角。請注意框內的箭頭在矩形路徑拐角處如何跟隨曲線。
• 路徑 2 矩形與路徑 1 矩形類似，不同之處在於右側值為 auto，其值等於 100%。這導致矩形的右邊緣與包含塊的右邊緣匹配，從而建立比路徑 1 更寬的矩形。
• 路徑 3 矩形將左側和右側邊緣引數都指定為 auto，並省略了 round <'border-radius'> 引數。這會建立一個寬度與包含塊相同且具有矩形角而不是像路徑 1 和路徑 2 矩形那樣的圓角的矩形。請注意此框內箭頭在拐角處的移動。

規範

瀏覽器相容性

另見

• inset() 函式
• xywh() 函式
• clip-path 屬性
• offset-path 屬性
• <basic-shape> 資料型別
• CSS 形狀模組
• 基本形狀指南