CSS offset-position 属性-之路教程

CSS offset-position 属性

offset-position 属性指定偏移路径的初始位置。

如果位置属性指定为“静态”值，则偏移位置将被忽略。

如果偏移路径是“几何框”或者“基本形状”，则偏移位置也会被忽略。

该特性是一项实验技术。

初始值	auto
应用于	可变形元素。
继承	无效
可动画的	是的。
版本	运动路径模块级别1
DOM 语法	object.Style.OffsetPosition =“auto”;

语法

offset-position: auto | <position> | initial | inherit;

offset-position 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      #element1 {
        position: relative;
        width: 300px;
        height: 300px;
        border: 2px solid #666;
      }
      #element2 {
        width: 100px;
        height: 100px;
        background-color: #1c87c9;
        position: absolute;
        top: 90px;
        left: 100px;
        offset-position: auto;
        offset-anchor: center;
        offset-path: ray(45deg);
      }
    </style>
    <body>
      <h2>Offset-position 属性示例</h2>
      <div id="element1">
        <div id="element2"></div>
      </div>
    </body>
</html>

属性值说明

值	描述
auto	表示初始位置是用位置属性指定的框的位置。
<position>	指定初始位置，其中包含块作为定位区域和无量纲点（零大小框）作为对象区域。可以使用一到四个值指定该值。如果定义一个值，则假定第二个值是中心。如果指定了两个非关键字值，则第一个表示水平位置，第二个表示垂直位置。如果指定了三个或者四个值，则长度百分比值为前面的关键字值偏移（读取背景位置属性以获取更多信息）。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:40 来源：oir作者：oir

←CSS offset-path 属性

CSS offset-rotate 属性→

语法

offset-position 属性的示例：

属性值说明

目录