1. Web
  2. CSS
  3. <shape>

<shape>

已棄用：此特性不再推薦。雖然某些瀏覽器可能仍然支援它，但它可能已經從相關的網路標準中刪除，可能正在刪除過程中，或者可能僅為相容性目的而保留。請避免使用它，如果可能，請更新現有程式碼；請參閱本頁底部的相容性表格以指導您的決策。請注意，此特性可能隨時停止工作。

<shape> CSS 資料型別定義了區域的特定形式（形狀）。該區域表示元素中應用 clip 屬性的部分。

注意： <shape> 和 rect() 與 clip 協同工作，但 clip 已被棄用，取而代之的是 clip-path。如果可能，請改用 clip-path 和 <basic-shape> 資料型別。

語法

<shape> 資料型別使用 rect() 函式指定，該函式會生成一個矩形區域。

rect()

css
rect(top, right, bottom, left)

值

A graph showing top, right, bottom, and left, as described below. These define the rectangle's shape. The upper left corner is defined by the top and left values. The bottom right corner is defined by the bottom and right values.

top

一個 <length>，表示矩形頂部相對於元素框頂部邊框的偏移量。

一個 <length>，表示矩形右側相對於元素框左側邊框的偏移量。

bottom

一個 <length>，表示矩形底部相對於元素框頂部邊框的偏移量。

left

一個 <length>，表示矩形左側相對於元素框左側邊框的偏移量。

插值

當動畫化時，<shape> 資料型別的值會根據其 top、right、bottom 和 left 元件進行插值，每個元件都被視為一個真實的浮點數。插值的速度由與動畫關聯的 緩動函式 決定。

示例

演示正確使用 rect() 函式的示例

css
img.clip04 {
  clip: rect(10px, 20px, 20px, 10px);
}

規範

規範
層疊樣式表級別 2
# value-def-shape

瀏覽器相容性

另見

  • 相關 CSS 屬性：clip

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者 在 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.