CSS offset-position 屬性
示例
指定元素的初始位置為右下角
#square {
width: 60px;
height: 60px;
background: blue;
offset-position: bottom right;
offset-path: ray(45deg);
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
offset-position 屬性指定元素沿路徑的初始位置。
offset-position 的值決定了元素在沿 offset 路徑移動時的初始放置位置，前提是 offset-path 函式沒有指定自己的起始位置。
| 預設值 | normal |
|---|---|
| 繼承 | no |
| 可動畫 | 是。 閱讀關於 可動畫屬性 的內容 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.offsetPosition="auto" |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| offset-position | 116 | 116 | 122 | 16 | 102 |
CSS 語法
offset-position: auto|normal|position|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| normal | 將偏移起始位置設定為包含塊的 50% 50%。 這是預設值。 |
| auto | 將偏移起始位置設定為元素框的左上角。 |
| position | 使用 x/y 座標指定位置，將元素放置在其框的邊緣相對。 位置可以使用一到四個值定義 |
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
檢視不同的偏移起始位置
#square1 {
width: 40px;
height: 40px;
background: pink;
text-align:center;
offset-position: bottom right;
offset-path: ray(45deg);
}
#square2 {
width: 40px;
height: 40px;
background: red;
text-align:center;
offset-position: top right;
offset-path: ray(25deg);
}
#square3 {
width: 40px;
height: 40px;
background: yellow;
text-align:center;
offset-position: normal;
offset-path: ray(45deg);
}
#square4 {
width: 40px;
height: 40px;
background: cyan;
text-align:center;
offset-position: auto;
offset-path: ray(95deg);
}
#square5 {
width: 40px;
height: 40px;
background: lavender;
text-align:center;
offset-position: 30% 70%;
offset-path: ray(120deg);
}
自己動手試一試 »
相關頁面
HTML SVG 教程：SVG 路徑
CSS 教程：CSS 動畫
CSS offset 屬性：CSS Offset 屬性
CSS offset-anchor 屬性：CSS Offset-anchor 屬性
CSS offset-distance 屬性：CSS Offset-distance 屬性
CSS offset-path 屬性：CSS Offset-path 屬性
