گوشه های گرد با CSS3
726 روز پیش
پويا صادقى , آموزش CSS
قبلا یه روش برای ایجاد باکس های گوشه گرد با CSS/HTML آموزش داده بودم.
حالا همین کار رو با CSS3 خیلی راحت ترمیتونیم انجام بدیم: border-radius برای گرد کردن گوشه ها (بدون هیچ دنگ و فنگی) معرفی شده. البته به خاطر این که بعضی مرورگرها (مثل IE ) مثل اینکه زیاد از CSS خوششون نمیاد (!!) و کدهای جدید رو پشتیبانی نمیکنن، Webkit و Gecko کدهای اختصاصی واسه خودشون درست کردن: برای موزیلا فایرفاکس:
-moz-border-radius: 5px;
برای گوگل کروم و اپل سافاری:
-webkit-border-radius: 5px;
و اینم کدی که قرار بوده همه مرورگرها ازش پشتیبانی کنن:
border-radius: 5px;
(برای احتیاط هر سه کد رو استفاده کنید.)
اگه مثلا میخواین گوشه ی بالا راست گرد بشه:
-moz-border-radius-topright; -webkit-border-top-right-radius;
*دقت کنید که طرز قرارگیری کلمه Topright برای Webkit و Gecko فرق میکنه 
این هم برای بقیه گوشه ها (+ معادل کد در Webkit) :)
-moz-border-radius-topleft ; -webkit-border-top-left-radius; -moz-border-radius-topright ; -webkit-border-top-right-radius; -moz-border-radius-bottomleft ; -webkit-border-bottom-left-radius; -moz-border-radius-bottomright ; -webkit-border-bottom-right-radius;
نوشته شده توسط پويا صادقى
سلام! من پویا صادقی هستم؛ طراح وب استاتیک ، CSS/HTML ، دانشجوی نرم افزار.
می تونید من رو در توییتر دنبال کنید، گالری من رو در deviantart ببینید،
یا با ایمیل info@Pasargad-Graphic.com تماس بگیرید.
