All Articles Web
گوشه های گرد در اشیاء طرح بندی در CSS3 ایجاد
Geoff Blake on Thu, April 21st | 0 comments
If you haven't been doing much reading up yet on what's new in CSS3, it's pretty awesome. There are all sorts of newly introduced possibilities, including gradients, multiple columns, border images, a

اگر شما نشده اند انجام می دهند بسیار خواندن رتبهدهی نشده است در مورد چه چیزی جدید در CSS3 ، آن را بسیار بسیار جذاب است. همه انواع امکانات تازه معرفی شده ، از جمله شیب ، ستون های متعدد ، تصاویر مرز ، و یک خواهیم بود صحبت کردن در یک نگاهی به اینجا ، شعاع مرز وجود دارد. شعاع مرزی به ما اجازه می دهد تا مجموعه ای گوشه های گرد در غیر این صورت اشیاء مستطیل در طرح بندی وب سایت ما است.

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

مرحله 1 -- استفاده از CSS3 مرزی شعاع

اول ، اجازه دهید درخواست شعاع مرز. در شیوه نامه های شما ، پیدا کردن قانونی که شما می خواهم اثر گوشه گرد به درخواست کنید. اغلب ، این خواهید بود که کنترل یک عنصر DIV انتخابگر ID. اطمینان حاصل کنید که بیش از حد است که شما همچنین استفاده از رنگ پس زمینه و یا یک مرز (یا هر دو) به طوری که شما می توانید از گوشه و کنار!

در مرحله بعد ، اضافه کردن "مرز شعاع" ملک به حکومت شما ، پس از آن توسط یک ارزش است. ارزش بالاتر استفاده می کنید ، گرد گوشه است.

در اینجا ، من استفاده از شعاع مرزی به محتوای # من ID گزینشگر ، که کنترل DIV که دارای محتوای صفحه من ، آنجا که می توانید در ضربه روی صفحه نمایش شامل را ببینید. اطمینان حاصل کنید که به صرفه جویی در کار شما و اتمام کار خود را در مرورگر خود.

اگر شما هنوز هم گرفتن گوشه 90 - درجه ، و سپس مرورگر شما یکی است که این ویژگی را پشتیبانی نمی کند. اما انجام کارهای در بسته نه تنها هنوز. اجازه دهید که ترفند های سرد من که قبلا ذکر شد.

مرحله 2 -- اطمینان از اثر نبش گرد کار می کند

همانطور که ذکر شد ، تنها آخرین نسخه از مرورگر محبوب را پشتیبانی اموال شعاع مرز CSS3 است. پس چگونه می تواند به شما اطمینان حاصل شود که طرح خود را برای کاربران که هنوز با استفاده از مرورگرها هستند که یک نسخه یا دو پشت کار؟ شما می توانید برخی از کد اضافی استفاده کنید ، به شرح زیر است.

نخست ، اجازه دهید اضافه در "- moz - مرزی شعاع :" به دنبال آن مقدار شعاع . این را هدف قرار آنچه به عنوان مرورگرهای مارمولک خانگی می گویند -- که مهمترین آنها فایرفاکس.

بعد ، اجازه دهید اضافه در "- webkit - مرزی شعاع :" به دنبال آن به همان مقدار که ما در بالا استفاده می شود . این شما همه مبتنی بر مرورگر WebKit ، ضربه مانند کروم و سافاری. پس از اضافه شده است ، صرفه جویی در کار شما و مرورگر خود کنید.

مرحله 3 -- استثنا ثابت قاعده

حالا چه در مورد اینترنت اکسپلورر ، مرورگر مورد علاقه هر طراح وب (SIC) ، به شما بخواهید ؟ خب ، تمام گزینه های بالا کار نخواهد کرد. در واقع ، کد ایم که به این نقطه اضافه شده به سادگی توسط اکسپلورر نادیده گرفته میشوند ، و گوشه و کنار به سادگی در پیش فرض خود را رندر 90 - درجه یک ظاهر طراحی شده است که بهتر از داشتن شکستن آن ، درست است؟ این ممکن است به جلو و گوشه های گرد در IE ، اما می دانیم که آن است که کمی از کار اضافی و شاید که چیزی که ما می تواند به در نوک آینده دریافت کنید. در حال حاضر ، هر چند ، لذت بردن از گوشه های گرد شده خود را در تمام مرورگرهای دیگر!

CSS شگفت انگیز است. کشف بیشتر در مورد طراحی پوسته CSS شناور .


Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: