آموزش کامل Border-Radius

نویسنده : Mohammad

آموزش کامل Border-Radius
سلام به همه ی دوستان عزیز. امروز می خوام به شما نحوه کامل کار کردن با border-radius یکی از خاصیت های اصلی css رو به شما اموزش بدم.

imageکار: ساخت انحنا و گردی در اطراف div و عکس و....(منظور از اطراف در 4 گوشه)

imageسازگاری:
   

توضیحات اضافه: قبلا که این خاصیت وجود نداشت طراحان وب مجبور بودند با ابزار هایی(معمولا فتوشاپ) برای چهار گوشه جسم شکل(انحنا) درست کنند و اون رو به چهار طرف آدرس بدن که کار واقعا سختی بود ولی خدا را شکر W3C عزیز این خاصیت رو هم اضافه کرد تا ما نو پا ها خسته نشیم همین اول راه!:KSQ:

خب با بسم الله الرحمن الرحیم کارمون رو شروع می کنیم:

نحوه کلی نوشتن استاندارد به 2 صورت هست:
1-

.mesal {
    border-radius: 10px;
}

که .mesal اسم کلاس ماست. به جای 10 می تونید هر عددی که می خواین بزارید و به جای px می تونید از دیگر واحد ها مانند em و یا حنی درصد % هم استفاده کنید.
این کد در اصل میگه که از همه طرف 10 پیکسل میزان درجه و انحنا داشته باشه. حالا ما شاید بخواهیم به هر طرف یه انحنا بدیم که شکل جالب تری درست بشه! بنظورتون چیکار باید بکنیم....
راهکار خیلی سادس باید به سراغ استاندارد دوم بریم:

.mesal2 {
    border-radius: 10px 0 10px 0;
}

این کد خیلی سادس ک با استفاده از این توضیح متوجه می شد:


.tozih-mesal {
    border-radius:  (میزان چپ پایین) (میزان راست پایین) (میزان راست بالا) (میزان چپ بالا) ;
}

البته جای خالی نمونه یک نوع دیگه هم دارید که به این صورته ولی روش بالا خیلی بهتره و استاندارد تر:
border-top-left-radius : 25px ;

border-top-right-radius : 20px ;

border-bottom-right-radius : 25px ;

border-bottom-left-radius : 20px ;

که توضیحش میشه:

.tozih-mesal {
    border-top-left-radius : میزان چپ بالا ;
    border-top-right-radius : میزان راست بالا ;
    border-bottom-right-radius : میزان راست پایین ;
    border-bottom-left-radius : میزان چپ پایین ;
}

امیدوارم از این آموزش لذت برده باشید.

image منبع: ایرانیان وب
نویسنده :

X
پلاگین گالری آواتار
[color=#ff0000] پلاگین :[/color] [size=small]Avatar Gallery Manager[/size]   [color=#ff0000]نسخه ...
تعیین نشده
    دیدگاه های کاربران 2
    ارسال: 2
    البته كامل كاملش
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -o-border-radius-topleft: 5px;
    -o-border-radius-topright:5px;
    -o-border-radius-bottomleft:5px;
    -o-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -ms-border-bottom-right-radius:5px;
    -ms-border-top-right-radius:5px;
    -ms-border-bottom-left-radius:5px;
    -ms-border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;



    كه موزیلا فایرفاکس : -moz-
    اکسپلورر : -ms-
    گوگل کروم و سافاری : -webkit-
    اپرا : -o-

    و تو كد ست ميشه مرورگر

    البته از نظر من hihi
    ارسال: 3
    (2014-04-24T22:39:43+00:00 2014-04-24T22:39:43+00:00)Mr President نوشته :  البته كامل كاملش
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -o-border-radius-topleft: 5px;
    -o-border-radius-topright:5px;
    -o-border-radius-bottomleft:5px;
    -o-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -ms-border-bottom-right-radius:5px;
    -ms-border-top-right-radius:5px;
    -ms-border-bottom-left-radius:5px;
    -ms-border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;



    كه موزیلا فایرفاکس : -moz-
    اکسپلورر : -ms-
    گوگل کروم و سافاری : -webkit-
    اپرا : -o-

    و تو كد ست ميشه مرورگر

    البته از نظر من hihi

    بله کاملا درسته ولی چون قبلا این مطلب http://community.mybbco.ir/Thread-%D8%A2...9%84%D9%81 بوجود اومده بود من دیگه این نکات رو نگفتم

    برای عضویت در کانال تلگرامی
    [همیار مای بی بی]
    کلیک کنید
    دریافت آخرین اخبار ، کدهای تخفیف و جوایز
    برای اطلاع از آخرین اخبار مای بی بی فارسی عضو کانال تلگرامی شوید :