<shape>

已弃用：此功能不再推荐。尽管某些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被删除的过程中，或者可能仅出于兼容性目的而保留。避免使用它，如果可能，请更新现有代码；请参阅此页面底部的兼容性表，以指导您的决策。请注意，此功能可能随时停止工作。

<shape> CSS 数据类型 定义区域的特定形式（形状）。该区域表示应用 clip 属性的元素的一部分。

注意：<shape> 和 rect() 与 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 修订版 2 (CSS 2.2) 规范
# value-def-shape

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

  • 相关 CSS 属性：clip