CSS border-start-end-radius کی ویژگی

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

border-start-end-radius ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਖੰਡ ਦਿਸ਼ਾ ਸ਼ੁਰੂ ਅਤੇ ਵਿਕਰਮ ਦਿਸ਼ਾ ਮੁਕਮਲ ਦਰਮਿਆਨ ਗੋਲਾਕਾਰ ਦੀ ਰੈਡੀਅਸ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ。

ਧਿਆਨ:ਸਬੰਧਤ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ writing-mode,text-orientation ਅਤੇ direction ਖੰਡ ਦਿਸ਼ਾ ਅਤੇ ਵਿਕਰਮ ਦਿਸ਼ਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹਨ। ਇਹੀ ਕਾਰਣ ਹੈ ਕਿ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵੀ ਪ੍ਰਭਾਵਿਤ ਕਰਦੀਆਂ ਹਨ: border-start-end-radius ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਨਤੀਜਾ ਹੈ। ਅੰਗਰੇਜ਼ੀ ਪੰਨਿਆਂ ਵਿੱਚ ਵਿਕਰਮ ਦਿਸ਼ਾ ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਅਤੇ ਖੰਡ ਦਿਸ਼ਾ ਉੱਥੇ ਹੋਵੇਗੀ।

ਜੇਕਰ border-start-end-radius ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਦੋ ਮੁੱਲ ਹਨ ਤਾਂ ਗੋਲਾਕਾਰ ਹੋਵੇਗਾ:

border-start-end-radius: 50px 100px;

ਜੇਕਰ border-start-end-radius ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਇੱਕ ਮੁੱਲ ਹੈ ਤਾਂ ਗੋਲਾਕਾਰ ਹੋਵੇਗਾ:

border-start-end-radius: 50px;

CSS border-start-end-radius ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius ਅਤੇ border-top-right-radius ਬਹੁਤ ਸਮਾਨ ਹਨ border-start-end-radius ਵਿਸ਼ੇਸ਼ਤਾ ਬਲਾਕ ਡਾਇਰੇਕਸ਼ਨ ਅਤੇ ਇਨਲਾਈਨ ਡਾਇਰੇਕਸ਼ਨ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ。

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਕੁਝ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਬਲਾਕ ਡਾਇਰੇਕਸ਼ਨ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਅਤੇ ਇਨਲਾਈਨ ਡਾਇਰੇਕਸ਼ਨ ਦੇ ਅੰਤ ਵਾਲੇ ਬਲਾਕ ਨੂੰ ਗੋਲਾਕਾਰ ਕਰੋ:

#example1 {
  background-color: lightblue;
  border-start-end-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-start-end-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-start-end-radius: 50%;
direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-start-end-radius: 50%;
  writing-mode: vertical-rl;
}

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2: direction ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਸਮੇਕਨ

ਬਲਾਕ ਡਾਇਰੇਕਸ਼ਨ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਅਤੇ ਇਨਲਾਈਨ ਡਾਇਰੇਕਸ਼ਨ ਦੇ ਅੰਤ ਵਾਲੇ ਬਲਾਕ ਦੀ ਗੋਲਾਕਾਰ ਸਥਿਤੀ ਇਸ ਦੇ ਕਾਰਣ ਪ੍ਰਭਾਵਿਤ ਹੁੰਦੀ ਹੈ direction ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਪ੍ਰਭਾਵ:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-start-end-radius: 25px;
}

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 3: writing-mode ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਸਮੇਕਨ

ਬਲਾਕ ਡਾਇਰੇਕਸ਼ਨ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਅਤੇ ਇਨਲਾਈਨ ਡਾਇਰੇਕਸ਼ਨ ਦੇ ਅੰਤ ਵਾਲੇ ਬਲਾਕ ਦੀ ਗੋਲਾਕਾਰ ਸਥਿਤੀ ਇਸ ਦੇ ਕਾਰਣ ਪ੍ਰਭਾਵਿਤ ਹੁੰਦੀ ਹੈ writing-mode ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਪ੍ਰਭਾਵ:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-start-end-radius: 25px;
}

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਸੀਐੱਸਐੱਸ ਗਰਿੱਫਿਕਸ

border-start-end-radius: 0|length|initial|inherit;

ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

ਸਪਰੈਡਸ਼ਨ ਵਿੱਚ ਦਿਖਾਈ ਨੰਬਰ ਪਹਿਲੀ ਵਾਰ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ。

ਸਬੰਧਤ ਪੇਜਜ਼

ਟੂਰੀਅਲ:CSS ਗੋਲ ਕੋਨ

ਸਰੋਤ:CSS بوردر بوتوم چپ سائیڈ رادیئس پراپرٹی

ਸਰੋਤ:CSS بوردر بوتوم راست سائیڈ رادیئس پراپرٹی

ਸਰੋਤ:CSS border-top-left-radius کی ویژگی

ਸਰੋਤ:CSS border-top-right-radius کی ویژگی

ਸਰੋਤ:CSS ڈائریکشن اٹری بیوٹ

ਸਰੋਤ:CSS text-orientation ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਰੋਤ:CSS writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ