loading...

سه نفری | بزرگترین سایت تفریحی آموزشی ایران

در این پست برای شما خاصیت عنصر border-radius را شرح میدهم،خاصیت این عنصر این است که با استفاده از آن میتوانید به تصاویر یا باکس های خودتان خصوصیت گرد شدن گوشه ها رو بدین،که باعث زیباتر شدن سایت و ت

آموزش خاصیت عنصر border-radius در CSS

admin بازدید : 1788 جمعه 08 فروردين 1393 نظرات (8)

در این پست برای شما خاصیت عنصر border-radius را شرح میدهم،خاصیت این عنصر این است که با استفاده از آن میتوانید به تصاویر یا باکس های خودتان خصوصیت گرد شدن گوشه ها رو بدین،که باعث زیباتر شدن سایت و تصاویرتان میشود،مثل تصویر زیر که تماماً از css ساخته شده (با css نوشته شده) و از هیچگونه تصویری استفاده نشده،که این کار باعث لود سریع تر سایت شما میشود،البته این خاصیت در مرورگر Internet Explorer پاینتر از ورژن 8 نشان داده نمیشود...برای یادگیری استفاده از این خاصیت با ما همراه باشید...



برای اینکه این خصوصیت را اعمال کنید باید یه class یا id داشته باشید و یا یه تگ style درست کنید و این عنصر را در آن قرار دهید،به صورت زیر:

<style>

</style>

و بعد از آن کدنویسی را شروع کنید که ما برای این کار از یه id استفاده میکنیم،به شکل زیر:

<style>

#borderradius{background:# aad400; border:1px solid #666; border-radius:15px; width:150px; height:150px;}

</style>

برای اینکه این کد در دیگر مرورگرها نیز نمایش داده شوند به صورت زیر عمل میکنیم (برای استفاده از کدهای زیر هرکدام از آنها را بعد border-radius:15px;  در کد بالا قرار میدیم به شکلی که در پایان قرار دادیم):

برای مرورگر موزیلا (فایرفاکس) :   ;-moz-border-radius:15px

برای مرورگر گوگل کروم :  webkit-border-radius:15px; -

برای مرورگر اُپرا : o-border-radius:15px;  -

برای مرورگر اینترنت اکسپلورر :   ;-ms-border-radius:15px

در کل کد بالا با تمام متعلقاتش به شکل زیر در می آید:

<style>

#borderradius{background:#aad400; border:1px solid #666; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; -o-border-radius:15px; -ms-border-radius:15px; width:150px; height:150px;}

</style>

و در پایان باید این id ایجاد شده را فراخوانی کنیم که به صورت زیر این کار را انجام میدهیم:

<div id="borderradius"></div>

در ضمن کد border-radius به صورت چهار قسمتی نیز کار میکند،یعنی اگر شما بخواهید فقط یکی از گوشه یا 2 و یا 3 تا از گوشه ها گرد شود میتوانید این کار را به راحتی انجام دهید،کد کلی به صورت زیر خواهد شد:

border-radius:گوشه پایین سمت چپ*گوشه پایین سمت راست*گوشه بالا سمت راست*گوشه بالا سمت چپ;

(علامت * یعنی فاصله بگذارید،به شکل زیر)

border-radius:5px 5px 5px 5px;

در صورتی که سوالی در این باره داشتید در قسمت نظرات عنوان نمایید.

مطالب مرتبط
ارسال نظر برای این مطلب
این نظر توسط محمد در تاریخ 8 سال پیش و 22:31 دقیقه ارسال شده است

سلام. نه زیاد بلد نیستم.
اما اگه میشه توی انجمن قید کنید.
شکلک
پاسخ : انشاء الله به زودی قرار میدم...

این نظر توسط محمد در تاریخ 8 سال پیش و 20:28 دقیقه ارسال شده است

عالی شد ... فدایییییییییییییییییییی داری داداش!
من هر کاری که از دستم بر بیاد براتون انجام میدم.فقط بگین .
واقعا ممنونم.
اگه بخوام میتونید بگین که باید چه طوری منوی کشویی رو درست کنم؟
پاسخ : خواهش میکنم داداش گلم،این کاری بود که از دستم بر میومد،اگه بازم بتونم به دوستان خدمت میکنم...
در مورد منوهای کشویی باید بگم که از خاصیت hover در css استفاده کردم،اگه کد نویسی بلد باشید منظورمو می فهمید،ولی اگه نفهمیدید،یه روز تو انجمن به طور کامل توضیح میدم...

این نظر توسط مهیار در تاریخ 8 سال پیش و 15:24 دقیقه ارسال شده است

سلام آقااسماعیل گل ،
به آدرس زیر سری بزن لینکش کن لینک شدی !
http://khereshk.rozblog.com
راستی قالب سایتو چیکار کردی ممنون میشم یه تغغیر تو قالب سافت 98 ایجاد کنی تا زیاد شبیهش نباشه
ممنون!
پاسخ : به روی چشم...

این نظر توسط محمد در تاریخ 8 سال پیش و 18:29 دقیقه ارسال شده است

سلام.
متن:
خنده بازار-مسافران آفتاب
لطفا متن بالای را بالای متن زیر قرار بدین:
بهترین سایت گردشگری و کاربردی خاورمیانه
اگه امکانش هست!
یعنی در قالب یه لوگو میشه دیگه نه؟
ضمنا میتونید قالب انجمن رو تغیرش بدین.
راستی فیو آیکون سایتم حذف شد !شکلک
میتونید برش گردونید؟شکلک
شکلک
شکلک
پاسخ : دوست عزیز درز اولین فرصت این لوگو روی سایت شما قرار میگیرد...

این نظر توسط محمد در تاریخ 8 سال پیش و 22:54 دقیقه ارسال شده است

اگه امکان داره یه لوگو برای سایتم درست کن که این متنش باشه :
>
آخه خودم هر کاری میکنم نمیشه .خراب میشه.

این نظر توسط محمد در تاریخ 8 سال پیش و 18:44 دقیقه ارسال شده است

خیلی ممنونم .
خیلی وبم قشنگ شده .
ممنونم.
ممنونم.
شکلک
پاسخ : خواهش میکنم،همین که تونستم یه کار مفید انجام بدم خدا رو شکر میکنم....

این نظر توسط محمد در تاریخ 8 سال پیش و 18:49 دقیقه ارسال شده است

ممنون میشم اگه تلاشتون رو بکنین.
راستی قالب سایتتون رو قرار بود بدین؟ چی شد؟
پاسخ : دوست گرامی به سایتتون برین میتونید قالب رو دانلود کنید،تو قسمت نظرات آدرسش رو قرار دادم...

این نظر توسط محمد در تاریخ 8 سال پیش و 15:23 دقیقه ارسال شده است

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


نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • آمار سایت
  • کل مطالب : 182
  • کل نظرات : 544
  • افراد آنلاین : 3
  • تعداد اعضا : 1165
  • آی پی امروز : 67
  • آی پی دیروز : 172
  • بازدید امروز : 143
  • باردید دیروز : 579
  • گوگل امروز : 3
  • گوگل دیروز : 2
  • بازدید هفته : 143
  • بازدید ماه : 9,547
  • بازدید سال : 62,815
  • بازدید کلی : 9,887,549