021-20483015

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

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

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

شماره روبروی هر مرورگر نشان دهنده اولین نسخه پشتیبانی کننده از صفت border-radius   می باشد.
شماره هایی که با عبارات -webkit- یا -moz- همراه هستند نشان دهنده اولین نسخه ای هستند که با prefix کار می کند.
صفت
کروم
اکسپلورر
فایرفاکس
سافاری
اپرا
border-radius
5.0
9.0
4.0
5.0
10.5

صفت border-radius در CSS3

ابتدا به 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 می باشد.

تعیین هر گوشه

اگر فقط یک مقدار برای صفت border-radius   تعیین کنید این مقدار برای هر 4 گوشه تنظیم خواهد شد.
البته می توان به هر گوشه مقدار متفاوتی از گردی را تعیین کرد. اگر تمایل به این کار داشته باشید ، قواعد ان به شرح زیر است :
4 مقدار : اولین مقدار گوشه بالا-چپ. دومین مقدار گوشه بالا-راست. سومین مقدار گوشه پایین-راست و چهارمین مقدار گوشه پایین-چپ را تعیین می کند.
3 مقدار : اولین مقدار گوشه بالا-چپ. دومین مقدار گوشه بالا-راست و پایین-چپ و سومین مقدار گوشه پایین-راست را تعیین می کند.
2 مقدار : اولین مقدار گوشه بالا-چپ و پایین راست و دومین مقدار گوشه بالا-راست و پایین-چپ را تعیین می کند.
1 مقدار : مقدار گردی هر 4 گوشه را تعیین می کند.

این هم 3 مثال برای این مسئله :

گوشه های گرد تکی
#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
مشاهده مثال
همچنین می توانید گوشه های بیضی ایجاد کنید :
گوشه های بیضی
#rcorners7 {
    border-radius: 50px/15px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

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

#rcorners9 {
    border-radius: 50%;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;
}
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط