با استفاده از خصوصیت border-radius در CSS3، شما می توانید به هر عنصری "گوشه های گرد شده" بدهید
  • محمد انصاری
  • 1395/3/26
  • 0
  • 420

گوشه های گرد شده ی CSS3

با استفاده از خصوصیت border-radius در CSS3، شما می توانید به هر عنصری "گوشه های گرد شده" بدهید.


پشتیبانی از مرورگر 

در جدول زیر اعداد نشان دهنده ی اولین نسخه ی مرورگری است که به طور کامل از خصوصیت پشتیبانی می کند. اعدادی که به همراه  -webkit-, -moz-, -o- آمده اند اولین نسخه ای از مرورگر را نشان می دهد که خصوصیت در صورت استفاده شدن با یک پیشوند توسط مرورگر پشتیبانی شده است.

 

خصوصیتChromeIEFireFoxSafariOpera
border-radius5.0
4.0 -webkit-
9.04.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

 خصوصیت border-radius

در CSS3 ، شما می توانید با استفاده از خصوصیت border-radius به عناصر "گوشه های گرد" بدهید.

در ادامه سه مثال مشاهده می کنید.

1. گوشه های گرد برای یک عنصر به همراه رنگ پس زمینه

گوشه های گرد!

2. گوشه های گرد برای یک عنصر با یک مرز

گوشه های گرد!

3. گوشه های گرد برای یک عنصر با تصویر پس زمینه

گوشه های گرد!

 

کد مثال های بالا به صورت زیر است:

#rcorners1 {
    border-radius25px;
    background#73AD21;
    padding20px
    width200px;
    height150px
}

#rcorners2 {
    border-radius25px;
    border2px solid #73AD21;
    padding20px
    width200px;
    height150px
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeatrepeat;
    padding20px
    width200px;
    height150px
}

 

نکته: خصوصیت border-radius یک خصوصت کوتاه نوشت (مختصر نویسی) برای خصوصیات زیر است:

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

 درجه ی گردی هر گوشه را مشخص کنید

اگر در خصوصیت border-radius یک مقدار قرار دهید، این درجه به همه چهار گوشه اعمال خواهد شد، به هر حال در صورتی که شما بخواهید می توانید درجه ی گردی هر گوشه را به طور جداگانه مشخص کنید:

  • چهار مقدار : مقدار اول به گوشه ی بالا-چپ ، مقدار دوم به گوشه ی بالا-راست، مقدار سوم به گوشه پایین-راست و مقدار چهارم به گوشه پایین-چپ اعمال می شود.
  • سه مقدار : مقدار اول به گوشه ی بالا-چپ ، مقدار دوم به گوشه ی بالا-راست، مقدار سوم به گوشه پایین-راست اعمال می شود.
  • دو مقدار: مقدار اول به گوشه ی بالا-چپ و گوشه پایین-راست اعمال می شود.
  • یک مقدار: به هر چهار گوشه اعمال می شود.

در ادامه سه مثال می آوریم:

1. چهار مقدار :

border-radius: 15px 50px 30px 5px:
 
 
2. سه مقدار:
 border-radius: 15px 50px 30px:
 
3. دو مقدار:
border-radius: 15px 50px:
 
 
کد مثال های بالا به صورت زیر است:
#rcorners4 {
    border-radius15px 50px 30px 5px;
    background#73AD21;
    padding20px
    width200px;
    height150px
}

#rcorners5 {
    border-radius15px 50px 30px;
    background#73AD21;
    padding20px
    width200px;
    height150px
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding20px
    width200px;
    height150px
}
همچنین شما می توانید گوشه های بیضوی ایجاد کنید:
#rcorners7 {
    border-radius50px/15px;
    background#73AD21;
    padding20px
    width200px;
    height150px
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #73AD21;
    padding20px
    width200px;
    height150px
}

#rcorners9 {
    border-radius50%;
    background: #73AD21;
    padding20px
    width200px;
    height150px;
}

محمد انصاری

من به عنوان طراح و برنامه نویس در شرکت توسن در حوزه ی بانکداری فعالیت می کنم. بیشتر زمانم رو به مطالعه پیرامون طراحی نرم افزار اختصاص میدم. همچنین علاقه ی زیادی به فعالیت های ورزشی دارم و زمان کافی به ورزش اختصاص می دهم.

نظرات0
برای ارسال دیدگاه وارد حساب کاربری خود شوید.

ورود به حساب کاربریایجاد حساب کاربری