|||

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

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

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

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

شماره همراه خود را وارد کنید

ورود و ادامه

گوشه های گرد در 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 یادگیری CSS

مقالات و دروس

برای پروژه‌ی خود مشاوره رایگان بگیرید

طراحی سایت، توسعه نرم‌افزار، اتوماسیون و شبکه؛ با کارشناسان شرکت نرم‌افزاری وب مهراز در ارتباط باشید.

درخواست مشاوره

مقالات مرتبط

|||

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

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد