آموزش ویژگی border-radius در css

3 دیدگاه
  • در این آموزش html css از سایت سون ریپلای جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت border-radius در زبان css خدمت شما عزیزان به طور کامل آموزش بدیم پس بامن همراه باشید .

    تسلط بر border-radius

    ویژگی کاربردی border-radius در آخرین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

    توسط خاصیت border-radius می توانیم گوشه های بالا ، پایین ، راست و چپ یک تگ html را گرد کنیم.

    مقدار تکی border-radius

    بیایید با پایه‌ها شروع کنیم. امیدوارم این مسئله حوصله شما را سر نبرد.
    احتمالا شما با CSS آشنا هستید، و همچنین border-radius را می‌شناسید.
    چند سالی می‌شود که این ویژگی وجود داشته است،
    و اکثرا با یک مقدار تکی مانند

    استفاده شده است و شاید یکی از مورد بحث‌ترین / دوست داشتنی‌ترین ویژگی‌ها در سال ۲۰۱۰ بود.

    هر زمان که فقط از یک مقدار تکی استفاده می‌کنید، تمام گوشه‌ها با این مقدار گرد می‌شوند:

    آموزش css

    همانطور که می‌توانید در مثال بالا ببینید، در کنار مقادیر ثابتی مانند px، rem یا em همچنین می‌توان از درصد هم استفاده کرد.
    این موارد اکثرا برای ساخت یک دایره، و با تنظیم شعاع به ۵۰ درصد استفاده می‌شوند.
    مقدار درصدی بر پایه عرض و طول عنصر داده شده می‌باشد. پس وقتی که از آن بر روی یک مستطیل استفاده می‌کنید،
    دیگر گوشه‌های متقارن ندارید. در اینجا مثالی را مشاهده می‌کنید
    که تفاوت میان border-radius: ۱۱۰px و border-radius: ۳۰% را در حالت اعمال شده به یک مستطیل نشان می‌دهد.

    آموزش css

    نکته مهم :

    این ویژگی به شما این امکان را می دهد، برای تگ های html خود که در سند html خود تعریف کردید، گوشه گرد ایجاد کنید.

    صفت border-radius در حقیقت صفتی جهت خلاصه نویسی چهار ویژگی دیگر برای گوشه گرد کردن جهات مختلف یک تگ html می باشد.

    این ویژگی ها عبارتند از:

    1. ویژگی border-top-right-radius ( گوشه گرد کردن سمت راست و بالای تگ html )
    2. ویژگی border-top-left-radius ( گوشه گرد کردن سمت چپ و بالای تگ html )
    3. ویژگی border-bottom-right-radius ( گوشه گرد کردن سمت راست و پایین تگ html )
    4. ویژگی border-bottom-left-radius ( گوشه گرد کردن سمت چپ و پایین تگ html )
    دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
    آموزش html و css اتریبیوت های زبان HTML Attributes

    چهار مقدار متفاوت

    وقتی که می‌خواهید از بیش از یک مقدار استفاده کنید، شروع به تنظیم مقادیر برای هر گوشه می‌نمایید،
    و با گوشه بالا سمت چپ شروع کرده و در جهت حرکت عقربه‌های ساعت پیش می‌روید.
    باز هم می‌توانید از درصدها استفاده کنید،
    و همچنین می‌توانید از درصدهای ترکیبی با مقادیر ثابت استفاده کنید.

    آموزش css

    هشت مقدار جدا شده با استفاده از یک اسلش

    فکر می‌کنم که اکثر شما از قبل تمام کارهایی که در بالا توضیح دادم را انجام داده‌اید.
    حال به بخش هیجان انگیز می‌رسیم.
    اگر مقادیر را با استفاده از یک اسلش جدا کنید و تا ۸ مقدار را مشخص کنید چه می‌شود؟ بیاید ببینیم که مشخصات این ویژگی چه چیزی را درباره آن می‌گوید:

    «اگر مقادیر قبل و بعد از اسلش داده شده باشند، مقادیر قبل از اسلش شعاع افقی، و مقادیر بعد از اسلش شعاع عمودی را تعیین می‌کنند.
    اگر اسلشی وجود نداشته باشد، هر دو مقدار به طور مساوی شعاع‌دهی می‌شوند.»

    پس مقادیر قبل از اسلش مسئول فاصله افقی بوده، و مقادیر بعد از اسلش طول عمودی را تعریف می‌کنند.
    اما معنای آن چیست؟ مقادیر درصدی بر روی اشکال مستطیل شکل را به یاد دارید؟ ما مقادیر مطلق متفاوتی برای فواصل عمودی و افقی و گوشه‌های گرد شده به صورت مقتارن داشتیم،
    و وقتی که از سینتکس اسلش (slash syntax) استفاده می‌کنید، دقیقا همین را به دست می‌آورید.

    دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
    آموزش کار با فونت ها یا Fonts در CSS آموزش css

    پس وقتی border-radius: ۴em ۸۳m‌ را با border-radius: ۴em / ۸em مقایسه می‌کنید،
    نتایج کاملا متفاوت هستند.

    آموزش css

    گوشه‌های متقارن بر روی سمت چپ، یک چهارم یک دایره را تشکیل می‌دهند، و گوشه‌های متقارن سمت راست بخشی از یک بیضی هستند.

    حال که شما مقادیر ۸ تایی را به کلی می‌شناسید، ممکن است کمی ناراحت شوید؛
    زیرا ابزار ما گزینه‌ای به شما نمی‌دهد که هر مقدار را به صورت جداگانه تنظیم کنید.
    نگران نباشید، نسخه ۸ مقداری را در اینجا می‌توانید بیابید.

    چند مثال خیلی ساده باهم کار کنیم .

    1- کد ساخت مربع با CSS3

    کد html :

    کد CSS :

    2- کد ساخت دایره با CSS3

    کد html :

    کد CSS :

    3- کد ساخت مستطیل با CSS3

    کد html :

    کد CSS :

    4- کد ساخت بیضی با CSS3

    کد html :

    کد CSS :

    5- کد ساخت لوزی با CSS3

    کد html :

    کد CSS :

    امید وارم که جلسه از آموزش html css برای شما عزیزان مفید بوده باشه هر گونه سوال یا مشکل داشته باشید میتوانید از قسمت نظرات سایت پیگری فرمایید موفق و سربلند باشید.

    دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
    آموزش ایجاد جدول HTML با استفاده از تگ Table

    میانگین امتیازات ۵ از ۵
    از مجموع ۱ رای
    اشتراک گذاری:

    مطالب مرتبط برای شما

    نظر یا سوال شما در این مورد چیست؟

      Adnanparvin

      سلام.
      من هر کاری میکنم border-radius رو روی پروژه م اعمال میکنم کلا کار نمیکنه نمیدونم باید چیکار کنم.کد دستور @media هام هم همینطور،لطفا راهنماییم کنین

        زمان الله ابراهیمی

        سلام خدمت شما دوست گرامی به احتمال زیاد مرورگر شما کش کرده باشه لطفا یک با کلید های ctlr+shift+r بزنید تست فرمایید مشکل باید برطرف گردد موفق باشید

      Adnan

      سلام.
      من هر کاری میکنم border-radius رو روی پروژه م اعمال میکنم کلا کار نمیکنه نمیدونم باید چیکار کنم.کد دستور @media هام هم همینطور،لطفا راهنماییم کنین