စီစ်စက်အလိုက် offset-position အခြား

  • အရောက် စာစောင် offset-path
  • နောက်ပိုင်း စာစောင် offset-rotate

အသုံးပြုခြင်း နှင့် အပြုအရင်

offset-position attribute က အဆိုပါ အရာ၏ လမ်းကြောင်း အတွင်း စတင် နေရာ ကို ချမှတ်သည်。

အကြောင်း offset-path function က သူ့ကိုယ်တိုင်၏ စတင် နေရာ ကို ချမှတ်ခြင်း မရှိဘဲ offset-position အဆိုပါ အရာ၏ အသုံးပြု အဆိုပါ အဆင်းသတ် လမ်းကြောင်း အတွင်း ပြောင်းလဲ လာရာ စတင် နေရာ ကို အချက်ပြချက်ပြုသည်。

အကျိုးသုံး

အမှတ် 1

အကိုးခံ အဆိုပါ အရာ၏ စတင် နေရာသည် အနောက်ဘက် အောက်ဘက် ဖြစ်သည်။

#square {
  width: 60px;
  height: 60px;
  background: blue;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

亲自试一试

例子 2

查看不同的偏移起始位置：

#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);
}

亲自试一试

CSS 语法

offset-position: auto|normal|position|initial|inherit;

属性值

值 描述
normal 将偏移起始位置设置为包含块的 50% 50%。默认值。
auto 将偏移起始位置设置为元素框的左上角。
position

指定一个 x/y 坐标，将元素相对于其框边缘放置。

可以使用 1 到 4 个值来定义位置。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： normal
继承性： 否
动画制作： 支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.offsetPosition="auto"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
116 116 122 16 102

ပတ်သက်သော စာစောင်

ပါးစပ်SVG လမ်း

ပါးစပ်စက်တင် အသင်း

လုပ်ဆောင်ခြင်းစီစ်စက်အလိုက် offset အခြား

လုပ်ဆောင်ခြင်းစီစ်စက်အလိုက် offset-anchor အခြား

လုပ်ဆောင်ခြင်းစီစ်စက်အလိုက် offset-distance အခြား

လုပ်ဆောင်ခြင်းစီစ်စက်အလိုက် offset-path အခြား

လုပ်ဆောင်ခြင်းစီစ်စက်အလိုက် offset-rotate အခြား

  • အရောက် စာစောင် offset-path
  • နောက်ပိုင်း စာစောင် offset-rotate