CSS 圆角

CSS 圆角

通过 CSS border-radius 属性，可实现任何元素的“圆角”样式。

CSS border-radius کا اپنے قیمتی

CSS border-radius ਗੁਣ ਐਲੀਮੈਂਟ ਦੇ ਕੋਣਾਂ ਦੇ ਰੈਡੀਅਸ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ。

ਸੁਝਾਅ:ਤੁਸੀਂ ਇਸ ਗੁਣ ਨੂੰ ਇਸ ਐਲੀਮੈਂਟ ਨੂੰ ਗੋਲਾਕਾਰ ਕੋਣ ਦੇ ਰੂਪ ਵਿੱਚ ਵਰਤ ਸਕਦੇ ਹੋ

ਇਥੇ ਤਿੰਨ ਉਦਾਹਰਣ ਹਨ:

1. ਨਿਰਧਾਰਿਤ ਪਿੱਛੇ ਬਿੰਦੂ ਵਾਲੇ ਐਲੀਮੈਂਟ ਦੇ ਗੋਲਾਕਾਰ ਕੋਣ

ਗੋਲਾਕਾਰ!

2. ਬਾਹਰੀ ਲਾਈਨ ਵਾਲੇ ਐਲੀਮੈਂਟ ਦੇ ਗੋਲਾਕਾਰ ਕੋਣ

ਗੋਲਾਕਾਰ!

3. ਪਿੱਛੇ ਬਿੰਦੂ ਵਾਲੇ ਐਲੀਮੈਂਟ ਦੇ ਗੋਲਾਕਾਰ ਕੋਣ

ਗੋਲਾਕਾਰ!

ਇਹ ਕੋਡ ਹੈ:

ਉਦਾਹਰਣ

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

ਆਪਣੇ ਅਨੁਭਵ ਲਈ ਪ੍ਰਯੋਗ ਕਰੋ

ਸੁਝਾਅ:border-radius ਗੁਣ ਅਸਲ ਵਿੱਚ ਹੇਠ ਲਿਖੇ ਗੁਣਾਂ ਦੇ ਸਰਲ ਰੂਪ ਹਨ:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - ਹਰੇਕ ਕੋਣ ਨੂੰ ਸੁਨਿਰਧਾਰਣ ਕਰਨਾ

border-radius ਗੁਣ ਇੱਕ ਤੋਂ ਚਾਰ ਮੁੱਲ ਸਵੀਕਾਰ ਕਰ ਸਕਦਾ ਹੈ। ਨਿਯਮ ਇਸ ਤਰ੍ਹਾਂ ਹਨ:

ਚਾਰ ਮੁੱਲ - border-radius: 15px 50px 30px 5px;（ਇੱਕ-ਇੱਕ ਕੋਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ: ਉੱਤਰੀ ਖੱਬੇ, ਉੱਤਰੀ ਪੱਛਮੀ, ਦੱਖਣੀ ਪੱਛਮੀ, ਦੱਖਣੀ ਖੱਬੇ）：

ਤਿੰਨ ਮੁੱਲ - border-radius: 15px 50px 30px;（ਪਹਿਲਾ ਮੁੱਲ ਉੱਤਰੀ ਖੱਬੇ ਕੋਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਦੂਜਾ ਮੁੱਲ ਉੱਤਰੀ ਪੱਛਮੀ ਅਤੇ ਦੱਖਣੀ ਖੱਬੇ ਕੋਣਾਂ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤੀਜਾ ਮੁੱਲ ਦੱਖਣੀ ਪੱਛਮੀ ਕੋਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ）：

ਦੋ ਮੁੱਲ - border-radius: 15px 50px;（ਪਹਿਲਾ ਮੁੱਲ ਉੱਤਰੀ ਖੱਬੇ ਅਤੇ ਦੱਖਣੀ ਉੱਤਰੀ ਕੋਣਾਂ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਦੂਜਾ ਮੁੱਲ ਉੱਤਰੀ ਪੱਛਮੀ ਅਤੇ ਦੱਖਣੀ ਖੱਬੇ ਕੋਣਾਂ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ）：

ਇੱਕ ਮੁੱਲ - border-radius: 15px;（ਇਹ ਮੁੱਲ ਸਾਰੇ ਚਾਰ ਕੋਣਾਂ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਸਾਰੇ ਗੋਲਾਕਾਰ ਇੱਕ ਹੀ ਤਰ੍ਹਾਂ ਦੇ ਹਨ）：

ਇਹ ਕੋਡ ਹੈ:

ਉਦਾਹਰਣ

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

ਆਪਣੇ ਅਨੁਭਵ ਲਈ ਪ੍ਰਯੋਗ ਕਰੋ

ਤੁਸੀਂ ਇੱਕ ਗੋਲਾਕਾਰ ਕੋਣ ਵੀ ਬਣਾ ਸਕਦੇ ਹੋ

ਉਦਾਹਰਣ

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

ਆਪਣੇ ਅਨੁਭਵ ਲਈ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਗੋਲਾਕਾਰ ਗੁਣ

ਗੁਣ ਵਰਣਨ
border-radius ਸਾਰੇ ਚਾਰ border-*-*-radius ਪ੍ਰਤੀਯੋਗੀ ਗੁਣਾਂ ਦੇ ਲਈ ਸਰਲ ਪ੍ਰਤੀਯੋਗੀ ਗੁਣ。
border-top-left-radius بنیادی کوئی باری کا شکل کا تعین کیا جاتا ہے
border-top-right-radius بنیادی کوئی باری کا شکل کا تعین کیا جاتا ہے
border-bottom-right-radius بنیادی کوئی باری کا شکل کا تعین کیا جاتا ہے
border-bottom-left-radius بنیادی کوئی باری کا شکل کا تعین کیا جاتا ہے