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. جعل متأكد جدا ان كنت أيضا تطبيق لون الخلفية أو الحدود (أو كليهما) بحيث يمكنك رؤية الزوايا!

المقبل ، إضافة إلى "دائرة نصف قطرها الحدود" الملكية للحكم الخاص ، تليها قيمة. ارتفعت قيمة تستخدمها ، وأكثر تنوعا في الزاوية.

هنا ، أنا تطبيق الحدود لدائرة نصف قطرها هويتي محتوى محدد # ، التي تسيطر على DIV الذي يحتوي على محتوى الصفحة بلدي ، وكما ترون في الشاشة بالرصاص المدرجة. تأكد من حفظ العمل الخاص بك والتحقق من عملك في المتصفح.

إذا كنت لا يزال الحصول على 90 درجة الزوايا ، ثم متصفحك واحد هو أن لا يعتمد هذه الميزة. ولكن لا شيء في حزمة فقط حتى الآن. دعونا تحقق من أن الحيلة بارد ذكرتها سابقا.

الخطوة 2 -- ضمان تأثير ركن الأشغال مدور

كما ذكرنا ، إلا أحدث الإصدارات من متصفحات الدعم الشعبي في دائرة نصف قطرها الممتلكات CSS3 الحدود. فكيف يمكنك التأكد من أن التخطيط الخاص ستعمل للمستخدمين الذين لا يزالون يستخدمون المتصفحات التي هي وراء إصدار أو اثنين؟ يمكنك استخدام بعض رمز إضافية ، على النحو التالي.

أولا ، دعونا نضيف في "- moz - قطرها الحدود :" متبوعة قيمة نصف قطرها. هذه الأهداف ما يشار إليه باسم متصفحات جيكو -- وأبرزها فايرفوكس.

المقبل ، دعونا نضيف في "، بكت ، نصف قطرها الحدود :" متبوعة نفس القيمة التي استخدمناها أعلاه. هذا وسوف تصل جميع المتصفحات المبنية على WebKit ، مثل كروم وسفاري. وأضاف مرة واحدة ، حفظ ما يصل عملكم وتحديث المتصفح.

الخطوة 3 -- استثناء يثبت القاعدة

الآن ماذا عن برنامج Internet Explorer ، كل متصفح شبكة المصمم المفضل (كذا) ، أنت تسأل؟ كذلك ، فإن كل الخيارات المذكورة أعلاه لا تعمل. في الواقع ، سوف ببساطة رمز التي تمكنا من إضافة ما يصل إلى هذه النقطة التي لا يمكن تجاهلها Explorer ، وزوايا سيجعل ببساطة الافتراضية الخاصة بهم في 90 درجة التصميم ، والتي هي خير من وجود كسر ذلك ، أليس كذلك؟ فمن الممكن لسحب قبالة زوايا مدورة في آي إي ، ولكن أعلم أنه قليلا من العمل الإضافي ، وربما هذا شيء نستطيع أن ندخل في طرف المستقبل. في الوقت الحاضر ، على الرغم من تمتع زوايا مدورة الخاص في جميع المتصفحات الأخرى!

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: