CSS ఆఫ్సెట్-పోజిషన్ అట్రిబ్యూట్

నిర్వచనం మరియు ఉపయోగం

offset-position అంశం ప్రదర్శించబడే అంశం యొక్క ప్రారంభ స్థానం నడిపే మార్గం లో నిర్ణయిస్తుంది.

ఉంటే offset-path ఫంక్షన్ యొక్క స్వంత ప్రారంభ స్థానం లేకపోతే 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;

లక్షణ విలువ

సాంకేతిక వివరాలు

బ్రౌజర్ మద్దతు

పట్టికలోని సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే బ్రౌజర్ సంస్కరణను సూచిస్తాయి。

相关页面

ట్యూటోరియల్:SVG 路径

ట్యూటోరియల్:CSS అనిమేషన్

పరికల్పన:CSS ఆఫ్సెట్ అట్రిబ్యూట్

పరికల్పన:CSS ఆఫ్సెట్-అంకర్ అట్రిబ్యూట్

పరికల్పన:CSS ఆఫ్సెట్-డిస్టెన్స్ అట్రిబ్యూట్

పరికల్పన:CSS ఆఫ్సెట్-పాథ్ అట్రిబ్యూట్

పరికల్పన:CSS ఆఫ్సెట్-రోటేషన్ అట్రిబ్యూట్