cssblog.ir logo
P

border-radius

خاصیت گردی گوشه ها

مشخصه border-radius میزان گردی گوشه‌ها در اجسام را تعیین می‌کند و از طریق آن می‌توانیم اجسامی مانند دایره را بوجود آوریم

با استفاده از مشخصه border-radius می‌توان تعیین نمود که گوشه های یک عنصر به چه اندازه گِرد شود. این مشخصه را در بسیاری از مواقع روی دکمه‌های وبسایت‌ها مشاهده می کنید که معمولا گوشه‌های کمی گِرد شده دارند. 

نحوه استفاده

مثال: گِرد شدن گوشه ها به اندازه ۱۰ پیکسل

مثال: ایجاد یک دکمه دانلود

تعیین جداگانه گِردی هر گوشه

می توان میزان گِردی هر گوشه را بصورت جداگانه تعیین کرد. برای انجام این کار، مقادیر را به ترتیب برای گوشه بالا سمت چپ، بالا سمت راست، پایین سمت راست و پایین سمت چپ وارد می کنیم. 

مثال: همان دکمه دانلود بالا که بدلیل حاشیه زیرین، استایل متفاوت تری گرفته است:

تعیین ۲ یا ۳ مقدار

خب در قسمت های قبلی تکلیف حالت های یک مقداره و ۴ مقداره مشخص شد. اما ما می توانیم برای border-radius دو یا سه مقدار را وارد کنیم. 

دو مقدار

در این حالت مقدار اول برای گوشه بالا سمت چپ و پایین سمت راست استفاده شده و مقدار دوم برای بالا سمت راست و پایین سمت چپ. مثال:

سه مقدار

در این حالت مقدار دوم برای بالا سمت راست و پایین سمت چپ اعمال می شود. مثال:

ایجاد یک دایره با استفاده از border-radius

برای ایجاد دایره می توان از این مشخصه استفاده کرد. برای انجام چنین کاری باید مقدار این مشخصه را برابر با ۵۰٪ (یا در واقع نصف عرض آن) قرار داد. مثلا اگر عرض عنصر ما ۳۰ پیکسل است، مقدار این مشخصه باید ۱۵پیکسل یا همان ۵۰٪ درصد باشد تا گِرد بنظر برسد. 

مثال: ایجاد یک دایره 

گِردی عمودی/افقی

یک امکان دیگری که این مشخصه دارد و خیلی ها از آن بی خبر هستند این است که با دادن مقدار ها به صورت 10px/20px که با یک اسلش (/) جدا شده اند می توان تعیین نمود که گوشه ها چه مقدار در راستای محور افقی و چه مقدار در راستای محور عمودی، گِرد شوند.

به شکل بوجود آمده در مثال زیر و  استایل آن دقت کنید و سعی کنید متوجه شوید که هر مقدار چه تاثیری در بوجود آمدن شکل زیر داشته است. 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند