在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

这是 实验性技术
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。

offset-position CSS property defines the initial position of the offset-path .

句法

/* Keyword values */
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;
/* <percentage> values */
offset-position: 25% 75%;
/* <length> values */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;
/* Edge offsets values */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;
/* Global values */
offset-position: inherit;
offset-position: initial;
offset-position: unset;
					

值

auto

The initial position is the position of the box specified by the position 特性。

<position>

A <position> . A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be center . If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s). For more explanation of these value types, see background-position .

形式定义

初始值	auto
适用于	transformable elements
继承	no
百分比	referToSizeOfContainingBlock
计算值	for <length> the absolute value, otherwise a percentage
动画类型	a position

形式句法

auto | <position>
where 
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
where 
<length-percentage> = <length> | <percentage>
					

范例

Setting initial offset position

<div id="motion-demo"></div>
					

#motion-demo {
  offset-path: path('M20,20 C20,100 200,0 200,100');
  offset-position: left top;
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}
@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
					

规范

规范	状态	注释
Motion Path Module Level 1 The definition of 'offset-position' in that specification.	工作草案	初始定义

浏览器兼容性

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
offset-position Experimental	Chrome 不支持 No	Edge 不支持 No	Firefox 不支持 No	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

元数据

• 最后修改： Sep 25, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Motion Path
4. 特性

   1. offset
   2. offset-anchor
   3. offset-distance
   4. offset-path
   5. offset-position
   6. offset-rotate