CSS ellipse() ਫੰਕਸ਼ਨ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

CSS ਦੇ ellipse() ਫੰਕਸ਼ਨ ਦੋ ਰੇਡੀਅਸ x ਅਤੇ y ਵਾਲੇ ਇੱਕ ਦੌਰਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ。

ellipse() ਫੰਕਸ਼ਨ ਆਮ ਤੌਰ 'ਤੇ clip-path ਪ੍ਰਤੀਭਾਵ ਅਤੇ shape-outside ਪ੍ਰਤੀਭਾਵ ਵਰਤੋਂ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਚਿੱਤਰ ਨੂੰ x ਰੇਡੀਅਸ 50% ਅਤੇ y ਰੇਡੀਅਸ 30% ਦੇ ਅਕਸੀਰੀਕਸ ਦੇ ਅਕਸੀਰੀਕਸ ਵਿੱਚ ਕਾਟ ਕਰੋ:

img {
  clip-path: ellipse(50% 30%);
}

ਆਪਣੇ ਆਪ ਵਿੱਚ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

ਚਿੱਤਰ ਨੂੰ x ਰੇਡੀਅਸ 50% ਅਤੇ y ਰੇਡੀਅਸ 30% ਦੇ ਅਕਸੀਰੀਕਸ ਦੇ ਅਕਸੀਰੀਕਸ ਵਿੱਚ ਕਾਟ ਕਰੋ, ਅਤੇ ਅਕਸੀਰੀਕਸ ਦੇ ਕੇਂਦਰ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਸਥਾਪਿਤ ਕਰੋ:

img {
  clip-path: ellipse(50% 30% at right);
}

ਆਪਣੇ ਆਪ ਵਿੱਚ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 3

ਵਰਤੋਂ clip-path ਅਤੇ ellipse() ਆਨੀਮੇਸ਼ਨ ਪ੍ਰਭਾਵ ਕਾਰਗਰ ਕਰੋ:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: ellipse(80% 50%);
}
@keyframes mymove {
  50% {clip-path: ellipse(30% 10%);}
}

ਆਪਣੇ ਆਪ ਵਿੱਚ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 4

ਮਿਲਾ ਕੇ ਵਰਤਣ ellipse()、clip-path ਅਤੇ shape-outside:

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

ਆਪਣੇ ਆਪ ਵਿੱਚ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਗਰੇਫਟ

ellipse(xy-radius ਸਥਾਨ)

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਪਰੇਸ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਨੰਬਰ ਸਭ ਤੋਂ ਪਹਿਲੇ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ。

ਸਬੰਧਤ ਪੰਨੇ

ਸਮਾਧਾਨ:CSS کلپ-پاتھ کیمپٹ

ਸਮਾਧਾਨ:CSS shape-outside ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਮਾਧਾਨ:CSS circle() ਫੰਕਸ਼ਨ

ਸਮਾਧਾਨ:CSS inset() ਫੰਕਸ਼ਨ

ਸਮਾਧਾਨ:CSS polygon() ਫੰਕਸ਼ਨ