سی ایس ایس چمپ

سی ایس ایس چمپ

از طریق CSS border-radius خصائص، می‌توانند هر عنصر را به هر شکل 'منحنی گوشه' تغییر دهند.

CSS border-radius کا حصہ

CSS border-radius 属性定义元素角的半径。

background: url(paper.gif);您可以使用此属性为元素添加圆角！

CSS

پروپرٹی عناصر کا کورنر کا قطر معین کرتی ہے。

1. پس منظر کی رنگ والے عناصر کا کورنر:

آپ اس پرپرٹی کو استعمال کرکے عناصر کا کورنر کرسکتے ہیں!

1. پس منظر کی رنگ والے عناصر کا کورنر:

یہاں تین مثال ہیں:

1. پس منظر کی رنگ والے عناصر کا کورنر:

یہ کوڈ ہے:

مثال

#rcorners1 {
  3. پس منظر کی تصویر والے عناصر کا کورنر:
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  3. پس منظر کی تصویر والے عناصر کا کورنر:
  2. بوردر والے عناصر کا کورنر:
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  3. پس منظر کی تصویر والے عناصر کا کورنر:
  کورنر!
  border: 2px solid #73AD21;
  border-radius: 25px;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

آپ خود کا تجربہ کریئن!

background: url(paper.gif);border-radius background-position: left top;

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

background-repeat: repeat;

border-radius نکات:

پروپرٹی حقیقت میں دراصل درج ذیل پروپرٹیوں کی لاتین نمونہ اپریشن ہیں:CSS 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 بائیں نیچے کا کاؤنٹر کی شکل کا تعین کرنا