X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

دسترسی به حق بیمه رایگان

دسترسی به کتابخانه تمام ما از مقالات توپی حق بیمه ، فایل های پروژه و اولین 10 ٪ از هر یک از مقالات ویدئو از کتابخانه خودآموز آنلاین.

ایجاد حساب کاربری رایگان شما در حال حاضر!

گوشه های گرد در اشیاء طرح بندی در CSS3 ایجاد
  • گوشه های گرد در اشیاء طرح بندی در CSS3 ایجاد

ترجمه شده توسط گوگل ترجمه

اگر شما نشده اند انجام می دهند بسیار خواندن رتبهدهی نشده است در مورد چه چیزی جدید در 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 شناور .


Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link