bundles
  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

نکاتی کاربردی در مورد CSS (جلسه 10) : نکاتی در مورد ویژگی border-radius

0 269 ۳۰ آذر ۹۵

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم.
css-style

در ویژگی border-radius میشه از Slash یا / استفاده کرد

شما میتونین در مورد این ویژگی اینجا بیشتر مطالعه کنید. این قابلیت خیلی وقت هست که اضافه شده و خیلی از شما امکان داره که با اون قبلا کار کرده باشید و یا آشنایی داشته باشید. اما بعضی از تازه کارها هستن که تا بحال با اون کار نکردن و بعضی از حرفه ای ها هم در این بین هستن که چیزی در مورد این قابلیت نمیدونن. کد زیر رو در نظر بگیرید:

شاید فکر کنید که کد نویسی بالا درون CSS معتبر نیس و اجازه استفاده از / درون کدها رو نداریم. اما این کد بر خلاف انتظار معتبر هست و میتونین از اون با خیال راحت استفاده کنید. اگر شما تا بحال چنین چیزی رو ندیده باشید و این اولین باری هست که اون رو میبینید، شاید مقداری براتون گیج کننده باشه. به تعریفی که درون Spec در مورد این قابلیت قرار داده شده، دقت کنید:

اگر درون مقدار ویژگی border-radius حرف / وجود داشته باشه، مقادیری که قبل از / میان، شعاع افقی و مقادیری که بعد از / میان، شعاع عمودی رو مشخص میکنن. اگر / درون مقدار وجود نداشته باشه شعاع عمودی و افقی با هم برابر قرار داده میشن.

همچنین درون Spec تصویر زیر قرار گرفته:1436312214border-radius-slash

عنوانی که در زیر این تصویر درون Spec قرار گرفته بصورت زیر هست:

دو مقدار درون تعریف border-top-left-radius: 55pt 25pt انحنای گوشه المنت مورد نظر رو مشخص میکنن.

پس استفاده از / برای مقدار border-radius به شما این امکان رو میده که انحناهای نامتقارن برای گوشه های المنتتون قرار بدین. اگر بخاید میتونین در مورد این ویژگی درون این لینک بیشتر مطالعه کنید. همچنین میتونین با استفاده از دموی زیر بصورت کامل با تمام ویژگی های موجود کار کنید و اونا رو تغییر بدین و تاثیر هر کدام بر روی المنتها رو ببینید.

همونطور که دیدید یک تولید کننده یا Generator حرفه ای از سایت MDN رو در بالا قرار دادیم و شما میتونین با استفاده از اون تمام ویژگی ها رو تست کنید و در آخر هم مقدار مورد نظرتون رو کپی کرده و در جای مورد نظرتون استفاده کنید. قبل و بعد از / چهار مقدار قرار گرفته که به ترتیب شعاع مربوط به گوشه بالا سمت چپ، بالا سمت راست، پایین سمت راست و پایین سمت چپ رو مشخص میکنه.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram