گروه مقاله : CSS3
تاريخ انتشار : 1394/03/03 - 09:49
كد :539
با استفاده از خاصیت border-radius در CSS3 (سی اس اس 3)، می توانید گوشه ها را گرد کنید.
پشتيباني مرورگرها
همانطور که میدونیم خاصیتهای زیادی در CSS (بخصوص در CSS3) و ... وجود دارد که به تازگی اضافه شده اند و به همین دلیل همه مرورگرها بطور کامل از آنها پشتیبانی نمی کنند. دانستن اینکه آیا یک مرورگر خاص از خاصیت مورد نظرمان پشتیبانی میکند یا نه برای طراحان وب خیلی مهم است.
|
Property |
|
|
|
|
|
|
border-radius |
9.0 |
5.0
4.0 -webkit- |
4.0
3.0 -moz- |
5.0
3.1 -webkit- |
10.5
|
IE9 خاصیت های از border-radius و box-shadow پشتیبانی می کند.
Firefox, Chrome, Safari همه ی خاصیت های جدید Border را پشتیبانی می کنند.
نکته: نسخه های 5 به قبل Safari برای استفاده از border-image نیاز به پیشوند -webkit- دارند.
Opera خاصیت های border-radius و box-shadow را پشتیبانی می کند، اما برای استفاده از خاصیت border-image نیاز به پیشوند -o- دارد.
گرد کردن گوشه ها در CSS3 (سی اس اس 3)
با استفاده از خاصیت border-radius در CSS3 شما می توانید گوشه های هر عنصری را گرد کنید.
مثال :
گرد کردن گوشه ها ی با پس زمینه رنگی :
گرد کردن گوشه ها (فقط لبه) :
گرد کردن گوشه ها با تصویر پس زمینه :
کد مثال بالا به صورت زیر است :
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
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;
}
مشخص کردن radius برای هر گوشه
اگر فقط یک مقدار به خاصیت border-radius بدهید، این خاصیت روی چهار گوشه لبه اعمال می شود.
در صورت تمایل می توانید برای هر گوشه بطور مجزا radius تعیین کنید :
تعیین radius برای چهار گوشه
border-radius: 15px 50px 30px 5px
تعیین radius برای سه گوشه
border-radius: 15px 50px 30px
تعیین radius برای دو گوشه
کد مثال بالا به صورت زیر می باشد :
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}