在此页

• 句法
• 插值
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

弃用
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the 兼容性表格 at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

<shape> CSS data type defines the specific form (shape) of a region. The region represents the part of an element to which the clip property applies.

注意： <shape> and rect() work in conjunction with clip , which has been deprecated in favor of clip-path . When possible, use clip-path 和 <basic-shape> data type instead.

句法

<shape> data type is specified using the rect() function, which produces a region in the form of a rectangle.

rect()

rect(top, right, bottom, left)
					

值

top

是 <length> representing the offset for the top of the rectangle relative to the top border of the element's box.

right

是 <length> representing the offset for the right of the rectangle relative to the left border of the element's box.

bottom

是 <length> representing the offset for the bottom of the rectangle relative to the top border of the element's box.

left

是 <length> representing the offset for the left of the rectangle relative to the left border of the element's box.

插值

When animated, values of the <shape> data type are interpolated over their top , right , bottom ，和 left components, each treated as a real, floating-point number. The speed of the interpolation is determined by the timing function associated with the animation.

范例

Example demonstrating correct use of the rect() function

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

规范

规范	状态	注释
CSS Level 2 (Revision 1) The definition of '<shape>' in that specification.	推荐	Defines with the clip 特性。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
<shape> 弃用	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 5.5	Opera 完整支持 9.5	Safari 完整支持 1.3	WebView Android 完整支持 37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
rect() 弃用	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 5.5 注意事项 完整支持 5.5 注意事项 注意事项 For Internet Explorer versions 5.5 through 7, the rect() function uses spaces (instead of commas) to separate parameters. For Internet Explorer 8 and later versions, only the standard comma-separated syntax is supported.	Opera 完整支持 9.5	Safari 完整支持 1.3	WebView Android 完整支持 37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持

完整支持

弃用。不要用于新网站。

弃用。不要用于新网站。

见实现注意事项。

见实现注意事项。

另请参阅

• Related CSS property: clip
• -moz-image-rect() function has similar coordinate values to rect() .

元数据

• 最后修改： Oct 12, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Types
4. 特性

   1. <angle-percentage>
   2. <angle>
   3. <basic-shape>
   4. <blend-mode>
   5. <custom-ident>
   6. <dimension>
   7. <frequency-percentage>
   8. <frequency>
   9. <gradient>
   10. <image>
   11. <integer>
   12. <length-percentage>
   13. <length>
   14. <number>
   15. <percentage>
   16. <ratio>
   17. <resolution>
   18. <shape>
   19. <string>
   20. <time-percentage>
   21. <time>
   22. <transform-function>
   23. <url>
   24. color
   25. flex
   26. ident
   27. position